CSS彈性盒子是 CSS3 的一種新的布局模式
CSS3 彈性盒（ Flexible Box 或 flexbox）砸西，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/h6>
彈性布局: 核心是使用彈性盒子(彈性盒模型) 以及它里面的彈性元素來實(shí)現(xiàn)對標(biāo)簽的排布叶眉，對齊的布局處理方式址儒。
設(shè)置彈性盒子芹枷，默認(rèn)可以使彈性子元素同行排布 并且會自動縮放
彈性子元素寬度保證所有彈性子元素同行排布， 如果彈性子元素沒有設(shè)置高度莲趣，
那么默認(rèn)會拉伸高度于彈性盒子同高鸳慈。
兼容性：IE11以下不兼容，但是移動端可以放心使用喧伞。
display：inline-flex; 行級盒子
display: flex; 塊級盒子
一.父元素屬性設(shè)置 （給父級設(shè)置）
1走芋、文字排列 flex-direction:
1、flex-direction:row; 默認(rèn) 從左到右
2潘鲫、flex-direction:row-reverse; 文字從右向左排列
3翁逞、flex-direction:column ; 文字從上向下排列
4、flex-direction:column-reverse; 文字從下往上排列
2溉仑、換行 flex-wrap:
1挖函、 flex-wrap: wrap-reverse; 換行, 從下往上排列
2、 flex-wrap:nowrap; 不換行
3浊竟、 flex-wrap:wrap; 換行
4怨喘、 flex-wrap:flex; 可以根據(jù)父元素寬度來改變子元素寬度津畸，不想改變，設(shè)置換行
彈性盒子可以修改子元素的寬度 可以根據(jù)自身的寬度修改子元素的寬度
當(dāng)設(shè)置換行以后必怜，子元素的寬度則不能被改變
3肉拓、flex-flow: flex-direction 和 flex-wrap 復(fù)合型寫法
flex-flow:row-reverse wrap; direction 的參數(shù)寫在前面 wrap的參數(shù)寫在后面
4、子元素的對齊方式 justify-content:
1梳庆、 justify-content: space-between; 先兩邊對齊暖途，然后等間距的分布在容器中
2、 justify-content: space-around; 先居中對齊膏执，然后等間距的分布在容器中
3丧肴、 justify-content: space-evenly; 注重間距，先將所有間距等分胧后，再排列子元素
4芋浮、 justify-content: center; 居中
5、 justify-content: flex-end; 右對齊
6壳快、 justify-content: flex-start; 左對齊
5纸巷、align-items: 交叉軸上對齊方式 （效果類似于 vertical-align ）
1、align-items: flex-start; 頂點(diǎn)對齊
2眶痰、align-items: flex-end; 底部對齊
3瘤旨、align-items: baseline; 文字頂端對齊
4、align-items: center; 中點(diǎn)對齊
5竖伯、align-items: stretc; 如果項(xiàng)目未設(shè)置高度或設(shè)為auto存哲，將占滿整個容器的高度。
二.子元素屬性(給子元素設(shè)置)
1七婴、order: 定義子元素的排列順序
order:1;
默認(rèn)值為0
數(shù)值越小 排列越靠前 （可以為負(fù)數(shù)）
2祟偷、flex-grow: 定義子元素的放大倍數(shù)
默認(rèn)為0 即 就算存在間隙 也不放大
如果所有子元素的值為1 則所有子元素 等分間隙
如果 其中一個子元素為 2 其他為1 則 2的那個子元素 比其他元素多放大一倍
這里說的一倍 不是子元素原本寬度的一倍 而是將父元素中的間隙平等均分 其所分到的間隙的寬度的一倍
3、flex-shrink: 定義元素縮放比例
默認(rèn)為1 可以根據(jù)父元素的寬度縮放
當(dāng)值為0 時 則根據(jù)父元素的寬度改變而不縮放
4打厘、flex-basis: 默認(rèn)初識值
flex-basis: 80px; 默認(rèn)初識長度為80px
5修肠、align-self: 對齊方式
允許 指定的 項(xiàng)目 可以與其他項(xiàng)目 有不同的對齊方式
可以覆蓋其父元素的 align-items
參數(shù)值：
1鳖擒、auto 元素 繼承其父元素 align-items 的對齊方式
2谈截、stretch 元素被拉伸以適應(yīng)父元素
3、flex-start 元素位于容器開頭
4浙巫、flex-end 元素位于容器結(jié)尾
5莽鸭、center 元素位于容器的 中間的位置
6吗伤、baseline 元素位于容器基準(zhǔn)線上
