布局的傳統(tǒng)解決方案轮纫，基于盒狀模型周蹭，依賴 display屬性 + position屬性 + float屬性愿险。
以下簡單的布局是難以或不可能用這樣的工具（ floats 和 positioning）方便且靈活的實現(xiàn)的：
- 在父內(nèi)容里面垂直居中一個塊內(nèi)容瘟滨。
- 使容器的所有子項占用等量的可用寬度/高度遇西，而不管有多少寬度/高度可用。
- 使多列布局中的所有列采用相同的高度次慢，即使它們包含的內(nèi)容量不同旁涤。
Flex布局將成為未來布局的首選方案。本文介紹Flex布局的語法迫像。
Flex布局是什么
Flex是Flexible Box的縮寫劈愚，意為”彈性布局”，用來為盒狀模型提供最大的靈活性闻妓【穑可以簡便、完整由缆、響應式地實現(xiàn)各種頁面布局注祖。
任何一個容器都可以指定為Flex布局。
div{
display: flex;
}
行內(nèi)元素也可以使用Flex布局均唉。
span {
display: inline-flex;
}
注意是晨，設為Flex布局以后，子元素的float舔箭、clear和vertical-align屬性將失效罩缴。
一個簡單的例子
例子 我們將使用該例子創(chuàng)建一個非常的標準三列布局。
首先，我們需要選擇將哪些元素將設置為柔性的盒子箫章。我們需要給這些 flexible 元素的父元素 display 設置一個特定值烙荷。
本例中，我們想要設置 <article> 元素檬寂，因此我們給 <section>（變成了 flex 容器）設置 display
section {
display: flex;
}
我們的多列布局具有大小相等的列奢讨，并且列的高度都是一樣。 這是因為這樣的 flex 項（flex容器的子項）的默認值是可以解決這些的常見問題的焰薄。
Flex容器&Flex項
設置了 display: flex 的父元素（在本例中是 <section>）被稱之為 flex 容器（flex container）拿诸。 在 flex 容器中所有子元素稱之為 flex 項（flex item）（本例中是 <article> 元素。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）塞茅。主軸的開始位置（與邊框的交叉點）叫做main start亩码，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start野瘦，結(jié)束位置叫做cross end描沟。
項目默認沿主軸排列。
單個項目占據(jù)的主軸空間叫做main size鞭光，占據(jù)的交叉軸空間叫做cross size吏廉。
容器的屬性
可以為容器設置以下六個屬性值：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1 flex-direction 決定主軸的方向（即項目的排列方向）
.box {
flex-direction: row（默認值） | row-reverse | column | column-reverse;
}
- row（默認值）：主軸為水平方向，起點在左端惰许。
- row-reverse：主軸為水平方向席覆，起點在右端。
- column：主軸為垂直方向汹买，起點在上沿佩伤。
- column-reverse：主軸為垂直方向，起點在下沿晦毙。
2 flex-wrap 決定項的換行規(guī)則
默認情況下生巡，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義见妒，如果一條軸線排不下孤荣，如何換行。
.box{
flex-wrap: nowrap（默認） | wrap | wrap-reverse;
}
- nowrap（默認）：不換行须揣。
- wrap：換行盐股，第一行在上方。
- wrap-reverse：換行返敬，第一行在下方遂庄。
3 flex-flow
是flex-direction屬性和flex-wrap屬性的簡寫形式寥院，所以默認值為row nowrap劲赠。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4 justify-content 控制 flex 項在主軸上的對齊方式
.box {
justify-content: flex-start（默認值） | flex-end | center | space-between | space-around;
}
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側(cè)的間隔相等凛澎。所以霹肝，項目之間的間隔比項目與邊框的間隔大一倍。
5 align-items 控制 flex 項在交叉軸上的對齊方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch（默認值）;
}
具體的對齊方式與交叉軸的方向有關塑煎，下面假設交叉軸從上到下沫换。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊最铁。
- center：交叉軸的中點對齊讯赏。
- stretch（默認值）：如果項未設置高度或設為auto，將占滿整個容器的高度冷尉。
- baseline: 項目的第一行文字的基線對齊漱挎。
6 align-content 定義了多根軸線的對齊方式
如果項目只有一根軸線，該屬性不起作用雀哨。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start：與交叉軸的起點對齊磕谅。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊雾棺。
- space-between：與交叉軸兩端對齊膊夹，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等捌浩。所以放刨，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線占滿整個交叉軸尸饺。
項的屬性
以下6個屬性設置在項上宏榕。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1 order屬性:定義項的排列順序
數(shù)值越小，排列越靠前侵佃，默認為0麻昼。
.item {
order: <integer>;
}
2 flex-grow :定義彈性盒子項（flex item）的拉伸因子
默認為0，即如果存在剩余空間馋辈，也不放大抚芦。
.item {
flex-grow: <number>; /* default 0 */
}
3 flex-shrink ：定義彈性盒子項的收縮規(guī)則
flex 元素僅在默認寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值迈螟。默認為1叉抡，即如果空間不足，該項目將縮小答毫。負值對該屬性無效褥民。
.item {
flex-shrink: <number>; /* default 1 */
}
4 flex-basis 指定了 flex項在主軸方向上的初始大小
如果不使用 box-sizing 來改變盒模型的話，那么這個屬性就決定了 flex 元素的內(nèi)容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小洗搂。
默認值為auto消返，即項目的本來大小载弄。也可以設為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間撵颊。
.item {
flex-basis: <length> | auto; /* default auto */
}
5 flex屬性
是flex-grow, flex-shrink 和 flex-basis的簡寫宇攻，默認值為0 1 auto。后兩個屬性可選倡勇。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6 align-self屬性：允許單個項目有與其他項目不一樣的對齊方式
可覆蓋align-items屬性逞刷。默認值為auto，表示繼承父元素的align-items屬性妻熊，如果沒有父元素夸浅，則等同于stretch。
.item {
align-self: auto（默認值） | flex-start | flex-end | center | baseline | stretch;
}
除了auto扔役，其他屬性值都與align-items屬性完全一致题篷。
