flex是flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為flex布局。

display

.container {
  display: flex | inline-flex;
}

定義一個flex容器,為內(nèi)容創(chuàng)建了一個新的flex環(huán)境
注意：當設(shè)置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效。

1. 父容器display: flex

2. 父容器display: inline-flex

原理

賦予父容器更改子元素寬高(或順序)的能力，來更好的填充可用的空間(主要使其適應(yīng)各種顯示設(shè)備和屏幕尺寸)。一個使用flexbox布局的父容器會伸展每個子元素來填充可用的空間，或者壓縮它們來阻止超出父容器。

最重要的是，flexbox布局在方向上是不可預(yù)知的，這一點和常歸布局不同(常規(guī)布局中塊是基于豎直方向排列的，而內(nèi)聯(lián)是基于水平方向)。這些常規(guī)布局在頁面中顯示都沒問題，但它們?nèi)狈`活性，難以支撐大型復(fù)雜應(yīng)用的需求，特別是響應(yīng)方向、大小、伸展、收縮等這些變化。

適用場景

flexbox最適合用在組件和小規(guī)模的布局中，如果是更復(fù)雜的布局，Grid布局會比較好一些。
由于flexbox是一個完整的模塊，它不單單是一個屬性，而是包含了一整套新的屬性集。這些屬性中一些是用來設(shè)置父容器的，而另外一些是設(shè)置子元素的。

flex 基本概念

main axis和cross axis

在flex box中存在兩條軸，主軸main axis,和側(cè)軸cross axis

• main axis: flex容器的主軸主要用來配置flex項目。注意，它不一定是水平，這主要取決于flex-direction屬性。
• main-start | main-end: flex項目的配置從容器的主軸起點邊開始，向主軸終點邊結(jié)束
• cross axis: 與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸
• cross-start | cross-end: 伸縮行的配置從容器的側(cè)軸起點邊開始，往側(cè)軸終點邊結(jié)束

item 是沿著main axis(起點main-start終點main-end)或者cross axis(起點cross-start終點cross-end)排列

main size和cross size

• main size: 每個item占據(jù)的主軸空間為main size，item的主軸長度是width還是height，由主軸方向決定。
• cross size: 每個item占據(jù)的交叉軸的空間為cross size，item的側(cè)軸長度是width或height，由側(cè)軸方向決定

要記住并不是寬度是main size，高度是cross size，是要根據(jù)主軸的方向來定義哪個是main size。如果垂直方向是主軸，則item的高度就是main size

下面來分別介紹flex container和flex item

flex容器

屬性

flex容器六種屬性，分別是：
1. flex-direction
2. flex-wrap
3. flex-flow
4. justfy-content
5. align-items
6. align-content

flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row(默認): 如果書寫方式是ltr，那么item從左向右排列；如果書寫方式是rtl，那么item從右向左排列
row-reverse: 如果書寫方式是ltr，那么item從右向左排列；如果書寫方式是rtl，那么item從左向右排列
column: 和row類似，只不過方向是從上到下排列
column-reverse: 和row-reverse類似，只不過方向是從下向上排列
點我看Demo

flex-wrap

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默認): 不換行，所有item會在一行
wrap: 多行顯示，向下折行
wrap-reverse: 多行顯示，向上折行
點我看Demo

flex-flow

flex-direction 和 flex-wrap 的簡寫形式，能夠同時定義flex容器的主軸和交叉軸

.container {
  flex-flow: <flex-direction> || <flex-wrap>；
}

默認值: row nowrap中間有空格

justify-content

這個屬性定義了item在主軸方向?qū)R方式

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start: 以主軸main-start端對齊
flex-end: 以主軸main-end方向?qū)R
center: 主軸居中
space-between: 兩端對齊，item之間相等間隔。如果是間距負數(shù)，或該行只有一個item，則此值等效于flex-start
space-around: 每個item兩側(cè)的間隔相等，所以item之間的間隔比item與邊緣的間隔大一倍。如果剩余空間是負數(shù)，或該行只有一個item，則該值等效于center
點我看Demo

align-items

這個屬性定義了item 在側(cè)軸上的對齊方式

.container {
  align-items: flex-start | flex-end | center | stretch | baseline;
}

stretch(默認): 當cross size未設(shè)置或者為auto時，拉伸至等于容器高度(會受到min-width/max-width的限制)
flex-start: 以側(cè)軸的cross-start端對齊
flex-end: 以側(cè)軸的cross-end端對齊
center: 以側(cè)軸的中點對齊
baseline: 以item的第一行文字的基線對齊
點我看Demo

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start: 在側(cè)軸的開始處將所有item連接起來，最后將空間全部包含在內(nèi)
flex-end: 在側(cè)周的末端將所有item連接起來，所有空間都在開頭
center: 將所有item拼接在十字軸的中間，每個末端的空間均等
space-between: 除了子元素之間的所有空間以及它們在交叉軸上的所有空間都是等量的
space-around: 具有非常相似的效果space-between，但Flexbox子系列的每一端都有較少的空間
點我看Demo

flex item

注意：一旦聲明了flex布局，那么float, clear和vertical-align對item將無效

屬性

flex item 六種屬性，分別是：
1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self

order

默認情況，item按文檔順序顯示。order屬性可以改變item的出現(xiàn)的位置。(索引從0開始)

.item {
  order: <integer>; /* default is 0 */
}

點我看Demo

flex-grow

定義item放大比

flex-grow.png

.item {
  flex-grow: <number>; /* default 0 */
}

點我看Demo

flex-shrink

定義item的收縮比例，當item寬度之和大于容器的寬度，才會發(fā)生收縮

.item {
  flex-shrink: <number>; /* default 1 */
}

number等于負數(shù)無效
點我看Demo

flex-basis

定義item在主軸方向上的初始大小，瀏覽器根據(jù)此屬性，計算主軸是否有多余空間。如果不使用 box-sizing來改變盒模型的話，那么這個屬性就決定了flex元素的內(nèi)容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

默認值：auto，即項目本來的大小, 這時候 item 的寬高取決于 width 或height的值
當主軸為水平方向的時候，當設(shè)置了 flex-basis，項目的寬度設(shè)置值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發(fā)揮效果。

• 當flex-basis值為 0 % 時，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px，也并沒有什么用。
• 當 flex-basis 值為 auto 時，則跟根據(jù)尺寸的設(shè)定值(假如為 100px)，則這 100px 不會納入剩余空間。

flex

flex-grow, flex-shrink 和flex-basis的簡寫

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-shrink和flex-basis為可選項
默認為0 1 auto
快捷值：auto (1 1 auto)和 none (0 0 auto)
點我看Demo

align-self

允許單個項目有與其他項目不一樣的對齊方式

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self作用在flex item上，屬性值的效果和align-items的相似

flexbugs

瀏覽器前綴

flex布局需要加一些瀏覽器前綴來兼容大多數(shù)的瀏覽器。Flex布局的前綴不只是在屬性前面添加瀏覽器前綴，不同瀏覽器下的屬性名和屬性值都不同，這是因為Flexbox布局的標準一直在變，一共有old, tweener, new 三個版本。

可能處理前綴的最好方法是使用新的語法書寫CSS并通過Autoprefixer運行CSS，能夠很好地處理這個問題。

Flex布局的三個版本

• new: 現(xiàn)在的最新版
• tweener: 2011過度版本
• old: 2009版本

兼容性

混合三個版本使用可以兼容到：

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any