什么是彈性盒子

• 彈性盒子是 CSS3 的一種新的布局模式。

• CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當?shù)男袨榈牟季址绞健?/p>

如何使用

1.基本概念

• 采用 flex 布局的元素，稱為 flex 容器，它所有的子元素稱為 flex 項目

• 容器默認存在兩根軸，橫軸和縱軸（默認是橫軸排列）
  

  橫縱軸排列

2.容器的屬性

下面的6個屬性設(shè)置在容器上

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

2.1 flex-direction

• flex-direction 決定主軸的方向

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

  direction-.png

• flex-direction的取值有

  • row：橫向從左到右排列（左對齊），默認的排列方式。
  • row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。
  • column：縱向排列。
  • column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。

2.2 justify-content

• justify-content 屬性定義了項目在主軸上的對齊方式。

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

  justify-content.png

• justify-content 的取值有

  • flex-start（默認值）：左對齊
  • flex-end：右對齊
  • center： 居中
  • space-between：兩端對齊，項目之間的間隔都相等。
  • space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

2.3 align-items

• align-items 屬性定義項目在縱軸上對齊方式。

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

  align-items.png

• align-items 的取值有

  • flex-start：交叉軸的起點對齊。
  • flex-end：交叉軸的終點對齊。
  • center：交叉軸的中點對齊。
  • baseline: 項目的第一行文字的基線對齊。
  • stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

2.4 flex-wrap

• flex-wrap 屬性定義項目元素換行的方式
  

  flex-wrap.png

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

• flex-wrap 的取值有

  • nowrap（默認）：不換行
    
    nowrap.png
  • wrap：換行，第一行在下方。
    
    wrap.jpg
  • wrap-reverse：換行，第一行在上方。
    
    wrap-reverse.jpg

2.5 align-content

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

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

  align-content.png

• align-content 的取值有

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

2.6 flex-flow

• flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

  .box {
      flex-flow: <flex-direction> || <flex-wrap>;
  }
  

3. 項目的屬性

下面的6個屬性設(shè)置在項目上

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

3.1 order

• order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。

  .item {
      order: <integer>;
  }
  

  order.png

3.2 flex-grow

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

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

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

3.3 flex-shrink

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

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

  flex-shrink.jpg
  
  如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

  負值對該屬性無效。

3.4 flex-basis

• flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

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

  它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。

3.5 flex

• 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)。

  建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。

3.6 align-self

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

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

  align-self.png

總結(jié)

• 本章講解了彈性布局的基本語法，大家可以試著寫下案列。
• 實戰(zhàn)案例在下一篇出。