什么是Flex布局

2009年，flex布局被W3C組織提出發布，到目前已有8年左右的歷史，得到各個瀏覽器的支持，Flex是Flexible Box的縮寫，意為“彈性布局”，為盒模型提供最大的靈活性。較于傳統的布局方式更加方便快捷。

Flex布局的語法

采用Flex布局的元素，稱為Flex容器，它的子元素被稱為容器成員，稱為Flex項目。

flex容器分為主軸（main axis）和垂直軸（corss axis），類似于數學中學過的XY坐標系，Flex項目默認按主軸排列。

（一）Flex（容器包裹項目的容器）的屬性

• flex-direction 主軸的方向（項目的排列方向）
  默認是以水平方向為主軸，也就是X軸
  語法

.容器 {
  flex-direction: row | row-reverse | column | column-reverse
}
 row: x軸從左到右排列
 row-reverse: x軸從右向左排列
 column: Y軸從上到下排列
 column-reverse: Y軸從下到上排列

• flex-wrap （一條軸線排不下，定義換行的方式）

.容器 {
  flex-wrap: nowrap | wrap | wrap-reverse
}
nowrap：不換行
wrap： 換行（第一行在上方，正常的換行）
wrap-reverse： 換行（越在后面的在最上面，可以堪成是行的倒敘排列）

• flex-flow （是上兩個felx-direction和flex-wrap的合并寫，默認值是row nowrap）

.容器 {
  flex-flow: <flex-direction> || <flex-wrap>
}

• justify-content （定義主軸的對齊方式，如果定義方向是X軸，則為X軸方向的對齊方式）

.容器 {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
以下對其方式都是按你flex-direction設置的項目排列方向對齊基線
flex-start：沿主軸方向（左對齊）
flex-end： 沿主軸方向 右對齊
center： 沿主軸方向 居中
space-between： 沿主軸方向 兩端 等間距的對齊
space-around：沿主軸方向 項目之間間距比項目兩端距離flex-start 和 flex-end的間距（大一倍）

• align-items（定義項目在交叉軸上方式對齊，如果定義方向是X軸，則為Y軸方向的對齊方式）

.容器 {
  align-items: flex-start | flex-end | center | baseline | stretch
}
本次是以交叉軸為Y軸的對齊方式
flex-start：上對齊
flex-end：下對齊
center: 居中對齊
baseline： 項目的第一行文字的基線對齊
stretch： 你的項目如果未設置高度或為auto，自動賦值為父容器的高度，填充整個容器，當有高度時，該屬性失效

• align-content （定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用）

  .容器 {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

具體的詳細的請參考阮一峰Flex布局語法

（二）項目的屬性

• order （定義項目的排列順序。數值越小，排列越靠前，默認為0）

.項目 {
 order: <integer> //數值
}
通過改變order，改變你的項目在項目中的排列順序

• flex-grow （定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大）

.項目 {
   flex-grow: <number>  default:0（非負）
}
number: 1 如果項目的flex-grow都為1，則將等分剩余空間；如果一個項目的flex-grow為2或者更大數字，前者占據的剩余空間比其他項目多你設置的倍數 。

• flex-shrink （定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小）

.項目{
    flex-shrink: <number>; /* default 1 */
}
所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

• flex-basis (設置項目沒有分配前所占據的空間）

.項目{
   flex-basis: <length> | auto; /* default auto */
}
它可以設為跟width或height屬性一樣的值（比如100px），則項目將占據固定空間。在放大縮小時不會改變。

• flex （flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選）
  放大，縮小，項目占據主軸的大小
• align-self （定制單個項目的對齊方式，和align-items一樣，如果沒有父元素，等同于stretch，會自動填充整個容器）