flex布局教程

傳統布局基于盒模型, 依賴 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 */
    }
    
    • 他可以設為跟widthheight屬性一樣的值, 則項目將占據固定空間
  • 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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容