CSS彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox）奏寨，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類(lèi)型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br>
引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列典挑、對(duì)齊和分配空白空間琳骡。
: 給父級(jí)設(shè)置
display：inline-flex; 行級(jí)
display: flex; 塊級(jí)
(1)煌往、父元素屬性設(shè)置
1、文字排列 flex-direction
1糠爬、flex-direction:row; //默認(rèn)
2寇荧、flex-direction:row-reverse; //文字從右向左排列
3、flex-direction:column ; //文字從上向下排列
4执隧、flex-direction:column-reverse; //文字從下往上排列
5揩抡、flex-direction:column-reverse;
2、換行 flex-wrap
1镀琉、nowrap //默認(rèn) 不換行
2峦嗤、wrap //換行 從上往下?lián)Q行
3、wrap-reverse // 從下往上換行
3屋摔、flex-flow flex-direction 和 flex-wrap 復(fù)合型寫(xiě)法
flex-flow:row-reverse wrap; //direction 的參數(shù)寫(xiě)在前面 wrap的參數(shù)寫(xiě)在后面
4烁设、justify-content 子元素的對(duì)齊方式
1、flex-strart //默認(rèn)左對(duì)齊
2钓试、flex-end //右對(duì)齊
3装黑、center //居中
4耙替、space-between //兩端對(duì)齊，項(xiàng)目之間的間隔都相等曹体。
5、space-around //先居中對(duì)齊 然后在等間距的分布在容器之中
6硝烂、space-evenly //注重間距 先將所有的間隙等分開(kāi) 在排列子元素
5箕别、align-items 交叉軸上對(duì)齊方式 （效果類(lèi)似于 vertical-align ）
1、flex-start //頂點(diǎn)對(duì)齊
2滞谢、flex-end //底部對(duì)齊
3串稀、center //中點(diǎn)對(duì)齊
4、baseline //文字頂點(diǎn)對(duì)齊
5狮杨、stretch //如果項(xiàng)目未設(shè)置高度或設(shè)為auto母截，將占滿整個(gè)容器的高度。
效果類(lèi)似于vertical-align
(2)橄教、子元素屬性
1清寇、order 定義子元素的排列順序
order:1;
默認(rèn)值為0
數(shù)值越小 排列越靠前 （可以為負(fù)數(shù)）
2、flex-grow 定義子元素的放大倍數(shù)
默認(rèn)為0 即 就算存在間隙 也不放大
如果所有子元素的值為1 則所有子元素 等分間隙
如果 其中一個(gè)子元素為 2 其他為1 則 2的那個(gè)子元素 比其他元素多放大一倍
這里說(shuō)的一倍 不是子元素原本寬度的一倍 而是將父元素中的間隙平等均分 其所分到的間隙的寬度的一倍
3护蝶、flex-shrink 定義元素縮放比例
默認(rèn)為1 可以根據(jù)父元素的寬度縮放
當(dāng)值為0 時(shí) 則根據(jù)父元素的寬度改變而不縮放
4华烟、flex-basis 默認(rèn)初識(shí)值
flex-basis: 80px; //默認(rèn)初識(shí)長(zhǎng)度為80px
5、flex 是 flex-grow持灰、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性盔夜。書(shū)寫(xiě)時(shí)注意書(shū)寫(xiě)順序。
//讓所有彈性盒模型對(duì)象的子元素都有相同的長(zhǎng)度堤魁，且忽略它們內(nèi)部的內(nèi)容
flex:1;
6喂链、align-self 對(duì)齊方式
允許 指定的 項(xiàng)目 可以與其他項(xiàng)目 有不同的對(duì)齊方式
可以覆蓋其父元素的 align-items
參數(shù)值：
1、auto //元素 繼承其父元素 align-items 的對(duì)齊方式
2妥泉、stretch //元素被拉伸以適應(yīng)父元素
3椭微、flex-start //元素位于容器開(kāi)頭
4、flex-end //元素位于容器結(jié)尾
5盲链、center //元素位于容器的 中間的位置
6赏表、baseline //元素位于容器基準(zhǔn)線上
