前端知識 | Flexbox布局模式

• 簡要介紹

flex 即 flexible box 彈性布局盒模型，,是2009年 w3c 提出的一種新型布局的屬性，引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。瀏覽器支持如下：

flex 盒子模型的出現主要是為了解決基于 display+position+float 的處理部分情況的不便，比如居中布局：

使用定位：

 .father{   

        width: 400px;

        height: 400px;

      position: relative;

    }

  .children{

         width: 100px;

        height: 100px;

      position: absolute;

      top: 50%;

      height: 50%;

margin-left: -50px;

margin-top: -50px;

}

使用 flex 情況：

 .father{  

        width: 400px;

        height: 400px;

              display: flex;

              justify-content:center;

              align-items:center;

 }

  .children{

         width: 100px;

        height: 100px;

}

可以看見如果使用了 flex，就很就簡單了。justify-content 和 align-items 分別定義了伸縮項目沿著主軸線的對齊方式和伸縮項目沿著縱軸對齊方式，Flex 的好處遠遠不止這些，下面我們來看下 w3c 定義的基本屬性。

• 基本概念

主軸（main axis）：沿著一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。

縱軸（cross axis）：與主軸垂直的軸稱作側軸，是側軸方向的延伸。

• 容器屬性

3.1 Flex-direction

flex-direction 會決定主軸的方向，它的值如下:

row（默認）：橫向排列（左對齊）。

row-reverse：反轉橫向排列。

column：縱向排列。

column-reverse：反轉縱向排列。

Flex-wrap

nowrap - 默認，彈性容器為單行。

wrap - 彈性容器為多行。

Flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的簡寫，可同時賦值 ， 默認 row nowrap。

Justify-content

flex-start（默認值）：左對齊

flex-end：右對齊

center： 居中

space-between：兩端對齊。

space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。

Align-items

flex-start：縱軸的起點對齊。

flex-end：縱軸的終點對齊。

center：縱軸的中點對齊。

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

stretch（默認）：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸。

Align-conten

flex-start：與縱軸的起點對齊。

flex-end：與縱軸的終點對齊。

center：與縱軸的中點對齊。

space-between：與縱軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（默認值）：軸線占滿整個縱軸。

• 項目屬性

Flex

該屬性有兩個快捷值：auto (1 1 auto) ，none (00 auto)。

Order

屬性定義項目的排列順序。數值越小，排列越靠前，默認為0

Flex-grow

flex-grow 定義彈性盒子元素的擴展比率 ，默認為0，即如果存在剩余空間，也不放大，如果所有項目的 flex-grow 屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow 屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

Flex-shrink

flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小，如果所有項目的 flex-shrink 屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的 flex- shrink 屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。

Flex-basis

flex-basis 定義彈性盒子元素的收縮比率，項目占據的主軸空間（mainsize）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為 auto，即項目的本來大小。它可以設為跟 width 或 height 屬性一樣的值（比如 350px），則項目將占據固定空間。

Align-self

align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。align-self 除了 auto，其他與 align-items 屬性基本一致。