傳統布局基于盒模型, 依賴 display屬性+position屬性+float屬性. 它對于那些特殊布局非常不方便, 比如, 垂直居中不容易實現.

flex布局是什么?

flex是flexible box的縮寫, 意為"彈性布局", 用來為盒狀模型提供最大的靈活度.

• 任何一個容器都可以指定為flex布局.

  .box{display: flex;}
  

• 行內元素也可以使用flex布局

   .box{display: inline-flex;}
  

• Webkit內核的瀏覽器, 必須加上-webkit前綴

   .box{
       display: -webkit-flex; /* Safari */
       display: flex;
    }
  

• 注意點: 設為flex布局以后, 子元素的float ,clear, vertical-align屬性將失效

基本概念

采用flex布局的元素, 稱為flex容器(flex container), 簡稱"容器". 它的所有元素自動成為容器的成員, 稱為flex項目(flex item), 簡稱項目.
容器默認存在兩根軸: 水平的主軸和垂直的交叉軸. 主軸的開始位置(與邊框的交叉點)叫做main start, 結束位置交錯main end; 交叉軸的開始位置叫做 cross start, 結束位置叫做cross end.
項目默認沿著主軸排列. 單個項目占據的主軸空間叫做main size, 占據的交叉軸空間叫做cross size.

容器的屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1flex-direction屬性決定主軸的方向(即項目的排列方向)

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

• row(默認值): 主軸為水平方向, 起點在左端
• row-reverse: 主軸為水平方向, 起點在右端
• column: 主軸為垂直方向, 起點在上沿
• column-reverse: 主軸為垂直方向, 起點在下沿

3.2 flex-wrap屬性

默認情況下, 項目都排在一條線(又稱軸線)上, flex-wrap定義, 如果一條軸線排不下, 如何換行.

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

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屬性定義了項目在主軸上的對齊方式.

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

對齊方式與軸的方向有關. 下面假設主軸從左到右

• flex-start(默認值): 左對齊
• flex-end: 右對齊
• center: 居中
• space-between: 兩端對齊, 項目之間的間隔都相等
• space-around: 每個項目兩側的間隔相等, 因此項目之間的間隔比項目與邊框的間隔大一倍

3.5 align-items屬性

• align-items屬性定義項目在交叉軸上如何對齊

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

• flex-start: 交叉軸的起點對齊

• flex-end: 交叉軸的重點對齊

• center: 交叉軸的中點對齊

• baseline: 項目的第一行文字的基線對齊

• stretch(默認值): 如果項目末設置高度或設為auto, 將占滿整個容器的高度

3.6 align-content屬性

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

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

• flex-start: 與交叉軸的起點對齊.
• flex-end: 與交叉軸的終點對齊.
• center: 與交叉軸的中點對齊.
• space-between: 與交叉軸兩端對齊, 軸線之間的間隔平均分布
• space-around: 每根軸線兩側的間隔都相等, 所以軸線之前的間隔比軸線與邊框的間隔大一倍
• stretch(默認值): 軸線占滿整個交叉軸

項目的屬性

以下6個設置在項目上order | flex-grow flex-shrink flex-basis flex align-self

• order屬性 定義項目的排列順序. 數值越小, 排列越靠前, 默認為0.

• flex-grow屬性 定義了項目的放大比例, 默認為0, 也不放大.

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

如果所有項目的flex-grow屬性都為1, 則它們將等分剩余空間(如果有的話), 如果一個項目的flex-grow屬性為2, 其它項目為1, 則前者占據的剩余空間將比其他項多一倍

• flex-shrink屬性 定義了項目的縮小比例, 默認為1, 即如果空間不足, 該項目將縮小.

  • 如果所有項目的 flex-shrink屬性都為1, 當空間不足時, 都將等比例縮小. 如果一個項目的flex-shrink屬性為0, 其他項目都為1, 則空間不足時,前者不縮小.
  • 負值對該屬性無效

• flex-basis屬性 定義了在分配多余空間之前, 項目占據的主軸空間,瀏覽器根據這個屬性, 計算主軸是否有多余空間, 它的默認值是auto, 即為項目的本來大小.

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

  • 他可以設為跟width或height屬性一樣的值, 則項目將占據固定空間

• flex屬性是 flex-grow, flex-shrink, flex-basis的簡寫. 默認值為0 1 auto. 后兩個屬性可選.

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

  • 該屬性有兩個快捷鍵:auto(1 1 auto)和none(0 0 auto).

• align-self屬性 允許單個項目有與其他項目不一樣的對齊方式, 可覆蓋 align-items屬性. 默認值為auto, 表示繼承父元素的align-items屬性, 如果沒有父元素, 則等同于stretch.

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

此文摘于此http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html