在前面一篇關(guān)于css歷史遺留問題的文章中，我們提到了flex這個(gè)概念，這是一種新興的布局方式，他目前已經(jīng)得到了所有瀏覽器的支持，我們可以放心大膽的在我們的系統(tǒng)中使用他。
什么是Flex
Flex，事實(shí)上是Flexible Box的縮寫，簡稱彈性布局，這是一種一維布局，可以很好的處理子元素在一個(gè)維度上（水平或者垂直）的元素排列，所有的容器都可以指定為Flex布局，只需要將容器的display屬性設(shè)置為flex。
.box{
display: flex | inline-flex;
}
容器的屬性
有以下六個(gè)屬性可以作用于flex容器上，我們逐個(gè)來看他們的作用：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction 決定主軸的方向
它可以是以下四個(gè)值
- row 橫向，從左向右依次排列（默認(rèn)）
- row-reverse 翻轉(zhuǎn)橫向，從右向左依次排列
- column 豎向，從上到下依次排列
- column-reverse 翻轉(zhuǎn)豎向，從下到上依次排列
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
2.flex-wrap 在一條軸線排不下的情況下，是否允許換行
他可以是以下三個(gè)值
- nowrap 不換行（這個(gè)是默認(rèn)值）
- wrap 換行，排列在第一行下面
- wrap-reverse 換行，排列在第一行上方
.box {
flex-wrap : nowrap | wrap | wrap-reverse;
}
3.flex-flow 是以上兩個(gè)屬性的簡寫，默認(rèn)值為row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content 主軸上的對齊方式
我們能用到的基本上是以下五個(gè)值：
- flex-start：左對齊（默認(rèn)值）
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項(xiàng)目之間的間隔都相等
- space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍
5.align-items
可以設(shè)置為以下五個(gè)值中的一個(gè)：
stretch：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。（默認(rèn)值，使用flex布局可以解決多列等高問題的原因）
flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊。
center：交叉軸的中點(diǎn)對齊。（可以實(shí)現(xiàn)垂直居中）
baseline: 項(xiàng)目的第一行文字的基線對齊。
.box {
align-items: stretch | flex-start | flex-end | center | baseline;
}
6.align-content 多根軸線情況下的對齊方式，用于flex-wrap不為nowrap的情況下。
他可以是以下六個(gè)值：
- stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸
- flex-start：與交叉軸的起點(diǎn)對齊
- flex-end：與交叉軸的終點(diǎn)對齊
- center：與交叉軸的中點(diǎn)對齊
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布
- space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
.box {
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
子元素的屬性
子元素的屬性也是6個(gè)，我們也逐一來看:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order 定義排列順序，數(shù)值越小的越靠前，默認(rèn)值為0
.item {
order: <integer>;
}
flex-grow 定義存在剩余空間的時(shí)候，項(xiàng)目放大比例，默認(rèn)是0（不放大）
.item {
flex-grow: <number>; /* default 0 */
}
比如有兩個(gè)子元素A和B，flex-grow都為1，那么他們將會(huì)平分剩余空間，現(xiàn)在我們將B的flex-grow改為2，那么B元素獲取的剩余空間將是A的兩倍。
flex-shrink 定義了空間不足時(shí)，項(xiàng)目的縮小比例，默認(rèn)為1
.item {
flex-shrink: <number>; /* default 1 */
}
當(dāng)我們想要其中一個(gè)元素不縮小的時(shí)候，可以把它的flex-shrink屬性單獨(dú)設(shè)置為0。
flex-basis 項(xiàng)目占據(jù)的主軸空間，默認(rèn)值為auto
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
他有兩個(gè)特殊的值：auto(1 1 auto) 和 none(0 0 auto)
align-self 單個(gè)元素的對齊方式，它可以覆蓋父元素的align-items屬性，默認(rèn)值為auto，即父元素的align-items屬性。
他可以填入的屬性值和align-items幾乎一致，只是多了個(gè)默認(rèn)值auto。
- auto：默認(rèn)值，繼承父元素屬性aligin-items，沒有則為stretch
- stretch：占滿整個(gè)容器的高度。
- flex-start：交叉軸的起點(diǎn)對齊。
- flex-end：交叉軸的終點(diǎn)對齊。
- center：交叉軸的中點(diǎn)對齊。
- baseline: 項(xiàng)目的第一行文字的基線對齊。
.item {
align-self:auto | stretch | flex-start | flex-end | center | baseline;
}
