<div>
Flex 是2009年W3C 提出了一種新的方案。Flex 是 Flexible Box 的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性，可以很方便得給HTML 元素佈局。在 Flex 佈局出來之前，主要是通過CSS 的 float 浮動和 position 定位來佈局，在實現一些佈局時非常不方便，比如：水平垂直居中，全屏上中下鋪滿。但是如果使用 Flex 就非常容易。下面雷雪松就詳細得講解一下Flex 常用屬性。
Flex  佈局主要分爲 容器屬性和項目屬性。Flex 容器屬性有6個：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。項目的屬性也有6個：order、flex-grow、flex-shrink、flex-basis、flex、align-self。在實際的Web開發中，Flex 容器屬性用的非常多，也是 Flex  佈局的重點。 Flex 容器屬性
1、flex-direction屬性 flex-direction屬性決定 主軸的方向 （即項目的排列方向）。可選值：row（默認值）：主軸爲水平方向，起點在左端。row-reverse：主軸爲水平方向，起點在右端。column：主軸爲垂直方向，起點在上沿。column-reverse：主軸爲垂直方向，起點在下沿。 
    2、flex-wrap屬性
    flex-wrap屬性定義，如果一條軸線排不下，如何換行。可選值：nowrap（默認）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。

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

    4 、justify-content屬性
justify-content 屬性定義了項目在 主軸上的對齊方式 。可選值：flex-start（默認值）：左對齊。flex-end：右對齊。center： 居中。space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與項目首位的間隔大一倍。 
    5、align-items屬性
align-items屬性定義項目在 交叉軸上的對齊方式 。可選值：flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。 
    6、align-content屬性
align-content屬性定義了 多根交叉軸線的對齊方式 。如果項目只有一根軸線，該屬性不起作用。可選值：flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線佔滿整個交叉軸。 Flex 項目屬性
1、order屬性 order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。 
    2、flex-grow屬性
    flex-grow屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，該項目不放大。

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

    4、flex-basis屬性
    flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。它可以設爲跟width或height屬性一樣的值（比如100px），則項目將佔據固定空間。

    5、flex屬性
    flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

    6、align-self屬性
    align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
    <h4>來源：</h4>
相關文章