1. Flex布局介紹
CSS的傳統(tǒng)布局解決方案卖鲤，基于盒狀模型肾扰，依賴display屬性畴嘶、position屬性、float屬性集晚，對于一些特殊的布局窗悯，例如垂直居中，往往要想很多hack的方法來解決偷拔。
2009年蒋院，W3C提出了一種新的方案--Flex布局，可以簡便莲绰、完整悦污、響應(yīng)式地實現(xiàn)各種頁面布局。目前钉蒲，它已經(jīng)得到了所有瀏覽器的支持切端，這意味著，現(xiàn)在就能很安全地使用這項功能顷啼。Flex布局的主要思想是為容器賦予控制容器內(nèi)元素的高度踏枣、寬度以及如何分割容器空間的能力。
Flex是Flexible Box的縮寫钙蒙，表示“彈性布局”的意思茵瀑，能夠為盒狀模型提供最大的靈活性。任何一個容器都可以指定為flex布局躬厌，使用flex布局以后马昨，子元素的float、clear和vertical-align元素都將失效扛施。
.box {
display: flex;
}
行內(nèi)元素也可以使用Flex布局鸿捧。
.box {
display: inline-flex;
}
Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴疙渣。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
2. 基本概念
采用Flex布局的元素匙奴，稱為Flex容器（flex container），簡稱”容器”妄荔。它的所有子元素自動成為容器成員泼菌，稱為Flex項目（flex item），簡稱”項目”啦租。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）哗伯。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end篷角；交叉軸的開始位置叫做cross start焊刹，結(jié)束位置叫做cross end。項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size伴澄，占據(jù)的交叉軸空間叫做cross size赋除。
下面對這幾個概念作簡要介紹：
- 主軸 main-axis，flex容器的主軸是容器內(nèi)項目 flex item的排列方向非凌。主軸方向并不一定是水平的举农，這個由
flex-direction屬性決定。 - main-start | main-end 敞嗡，容器內(nèi)項目的排列是從main-start到main-end颁糟。
- main-size
- 交叉軸 cross axis 與主軸垂直的交叉軸，它的方向由主軸的方向決定
- cross-start | cross-end
- cross-size
3. Flex容器的屬性
Flex容器具有以下六個屬性喉悴。
- display 該屬性決定flex布局的容器棱貌，
display:flex;- flex-direction 該屬性決定主軸的方向（即項目的排列方向）
- flex-wrap 該屬性決定flex元素的換行方式，默認情況下容器內(nèi)項目總是傾向于排列在一行內(nèi)
- flex-flow 該屬性是
direction和wrap的組合屬性箕肃，默認值是row nowrap- justify-content 該屬性定義容器中項目在主軸上的對齊方式
- align-items
- align-content
3.1 flex-direction
flex-direction屬性決定主軸的方向（即容器元素的排列方向）婚脱，有四個取值。
- row（默認值）勺像，主軸為水平方向障贸，起點在左端。
- row-reverse吟宦，主軸為水平方向篮洁，起點在右端。
- column殃姓，主軸為垂直方向袁波，起點在上沿。
- column-reverse蜗侈，主軸為垂直方向篷牌，起點在下沿。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
3.2 flex-wrap
熟悉wrap的同學(xué)應(yīng)該知道宛篇，這個屬性是決定如何處理一行顯示不下的情況娃磺，有三個屬性：
- nowrap 不換行
- wrap 換行，第一行在上叫倍，往下折行
- wrap-reverse 換行，第一行在下豺瘤，往上折行
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
3.3 flex-flow
flex-flow是flex-direction和flex-wrap組合屬性的簡寫吆倦，默認值為row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content
justify-content定義項目在主軸上的對齊方式坐求，還能夠幫助我們分配容器項目以外的剩余空間蚕泽，即便是沒有剩余空間。有以下屬性：
- flex-start(默認值): 主軸的起點對齊
- flex-end: 主軸的終點對齊
- center: 沿主軸居中對齊
- space-between: 兩端對齊，項目之間的間隔相等
- space-around: 每個項目兩側(cè)的間隔相等须妻，所以項目之間的間隔比左右兩邊的間隔大一倍
- space-evenly: 每個項目的間隔以及兩側(cè)的間隔都相等
- start: 容器內(nèi)的項目堆在書寫方向
writing-mode的開始 - end: 容器內(nèi)的項目堆在書寫方向
writing-mode的結(jié)束 - lfet: 容器內(nèi)的項目堆在容器的左邊
- right: 容器內(nèi)的項目堆在容器的右邊
- safe:
- unsafe:
注意不同瀏覽器對這些屬性的支持程度還不太一樣仔蝌，
space-between從未在Edge瀏覽器上獲得過支持，最安全的幾個屬性是flex-start荒吏，flex-end敛惊，center。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
3.5 align-items
align-items 該屬性決定項目在交叉軸上如何對齊绰更，有以下屬性：
- flex-start 交叉軸的起點對齊
- flex-end 交叉軸的終點對齊
- center 交叉軸的中間對齊
- start 書寫方向的起點對齊
- end 書寫方向的終點對齊
- baseline 項目的第一行文字的基線對齊
- stretch(默認值) 如果項目未設(shè)置高度或設(shè)為auto瞧挤，項目將占滿整個容器的高度，這樣做兩列布局再也不用發(fā)愁高度不一致了儡湾。
在flex布局中有主軸和側(cè)軸的區(qū)分特恬，和我們一般認為的橫軸為主軸、縱軸為側(cè)軸的固定認知不同徐钠，flex布局中主軸和側(cè)軸會發(fā)生變化癌刽，這是由之前
flex-direction屬性決定的。當(dāng)flex-direction:row的時候尝丐，主軸就是橫軸妒穴，要調(diào)整元素在橫軸的排列就需要使用justify-content屬性。當(dāng)flex-direction:column的時候摊崭，主軸就是縱軸讼油，要調(diào)整元素在橫軸的排列就需要使用align-items屬性。
3.6 align-content
這個屬性決定當(dāng)容器在交叉軸方向還有剩余空間時呢簸，項目的排列方式矮台。
這個屬性在只有一行容器內(nèi)項目時無效，在設(shè)置了
nowrap時也無效根时。
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
- baseline
4. 項目的屬性
項目包括6個屬性
- order 該屬性定義項目的排列順序瘦赫。數(shù)值越小，排列越靠前蛤迎，默認為0确虱。通過css就能控制DOM元素的順序，簡直太方便了替裆。
- flex-grow 該屬性定義項目放大的比例校辩，默認為0，也就是項目的大小不會發(fā)生縮放辆童。
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order
order 屬性定義項目的排列順序宜咒。數(shù)值越小，排列越靠前把鉴，默認為0故黑。通過css就能控制DOM元素的順序，簡直太方便了。
.item {
order: <integer>;
}
4.2 flex-grow
flex-grow屬性定義項目相對于其他項目進行擴展的量场晶，默認為0混埠。注意：如果項目不是flex item，則 flex-grow 屬性不起作用诗轻。如果所有的項目都設(shè)置為1钳宪，則每個項目分到的空間都一樣。如果有一個設(shè)置為2概耻，則它分到的空間要比其他項目多一倍使套。負數(shù)無效。
.item {
flex-grow: <number>;
4.3 flex-shrink
flex-shrink 屬性定義項目相對于其他項目縮小的比例鞠柄。負數(shù)無效侦高。
.item {
flex-shrink: <number>
}
4.4 flex-basis
flex-basis 屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）厌杜。瀏覽器根據(jù)這個屬性奉呛，計算主軸是否有多余空間。它的默認值為auto夯尽，即項目的本來大小瞧壮。
.item {
flex-basis: <length> | auto;
}
4.5 flex
flex屬性是flex-grow,flex-shrink,flex-basis組合，默認值為0 1 auto后兩個屬性可選匙握。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
4.6 align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式咆槽，可覆蓋align-items屬性。默認值為auto圈纺，表示繼承父元素的align-items屬性秦忿，如果沒有父元素，則等同于stretch蛾娶。屬性支持的值包括：
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
5. 瀏覽器支持
flexbox從出現(xiàn)到現(xiàn)在經(jīng)歷了多個版本灯谣，下圖new的含義表示現(xiàn)在的語法display:flex;。tweener表示2011年后出現(xiàn)的一個非官方的寫法display:flexbox;蛔琅。old表示2009年出現(xiàn)后的舊語法display:box;胎许。
