flex布局

彈性布局，當設置為flex布局之后，子元素的float、clear、vertival-align屬性將會失效

• 采用flex布局的元素稱為容器，其子元素稱為項目；
• 容器中存在水平的主軸及垂直的交叉軸

容器屬性

• flex-direction：

  row（默認） | row-reverse | column | column-reverse
  

  定義項目在主軸的排列方向即<b>改變主軸和交叉軸的方向</b>

• flex-wrap：

  nowrap（默認） | wrap | wrap-reverse
  

  定義項目在軸線上的換行方式

• flex-flow :

  row nowrap （默認）[flex-direction flex-wrap]
  

  flex-direction和flex-wrap的縮寫

• justify-content ：

  flex-start（默認） | flex-end | center | space-between | space-around
  

  定義了項目在主軸上的對齊方式(<b>具體方向根據(jù)flex-direction的設置</b>)

  例如 ： 當父元素設置flex-direction：column，主軸方向為垂直方向，即justify-content為垂直方向的對齊

  space-between是項目兩側對齊，項目之間間隔相等；
  space-around是項目兩側間隔想等，項目間隔是項目與邊框之間距離的兩倍

• align-item ：

  flex-start | flex-end | center | baseline | stretch（默認）
  

  定義了項目在交叉軸上的對齊方式(<b>具體方向根據(jù)flex-direction的設置</b>)
  項目未設置高度時，strech會占滿整個容器

• align-content

  flex-statr | flex-end | center | strecth（默認） | space-between | space-around
  

  定義多根軸線對對齊方式
  多根軸線前提下，以交叉軸為對齊標準

項目屬性

• order

  <integer>  數(shù)字越小，排列越靠前
  

  定義項目的排列順序

• flex-grow

  <number> 默認為0
  

  定義項目的放大比例，flex-grow大于等于1時沒有剩余空間，項目按比例放大，flex-grow小于1時則會剩余空間并且與項目為按比例展示

• flex-shrink

  <number> 默認為1
  

  定義項目的縮小比例，在flex容器空間不足的時候進行比例收縮，項目值相同的時候將會等比例收縮

  負值無效

• flex-basis

  <length> 默認為auto
  

  定義在分配剩余空間之前，項目占據(jù)主軸的大小

• flex

  [flex-grow flex-shrink flex-basis] 后兩項為可選，默認值為0，1，auto
  

  flex-grow flex-shrink flex-basis的縮寫

• align-self

  auto | flex-start | flex-end | center | baseline | stretch
  

  定義項目自己在交叉軸上的對齊方式，與容器的align-items屬性相同

  auto為繼承容器的屬性

更多詳解：flex詳解指路