css3彈性盒模型flex的屬性

css3彈性盒模型flex的屬性

 

- flex-direction    

項目的排列方向，value的取值包括：row，row-reverse，column，column-reverse，其中row是默認值，水平方向（起點在左端），column是垂直方向（起點在頂端），帶-reverse的值則表示反方向

- flex-wrap

該屬性定義項目是否換行並且如何換行。在默認情況下，項目都排在一條軸線上，如果一條軸線排不下，瀏覽器就根據這個屬性的值對項目排列作出調整。value的取值包括：nowrap，wrap，wrap-reverse，其中，nowrap是默認值，不換行。用法及效果如下：

 

.item-class{

    flex-grow:1;

}

 

 

- flex-flow

該屬性是flex-direction和flex-wrap的簡寫形式，默認值爲row nowrap。使用方式如下：

 

.flex-item{

    flex-flow:colunm wrap;

}

- justify-content

該屬性定義了項目在主軸上（main axis）的對齊方式。value的取值包括：

 

- flex-start：默認值。軸的起始端（main/cross start）

- flex-end：軸的終點端

- center：居中

- space-between：兩端對齊，項目之間的間隔都相等。

- space-around：每個項目兩側的間隔相等。那麼項目之間的間隔就是項目與邊框之間的間隔的兩倍

 

- align-items

該屬性定義項目在交叉軸上的對齊方式。value的取值包括：

 

- flex-start：交叉軸的起點對齊

- flex-end：交叉軸的終點對齊

- center：居中

- baseline：以項目的第一行文字的基線對齊

- stretch：默認值，如果項目未設置高度或設爲auto，那麼項目將佔滿整個容器的高度

- align-content

該屬性定義了多個軸線的對齊方式。value的取值包括：

- flex-start：與交叉軸的起點對齊

- flex-end：與交叉軸的終點對齊

- center：交叉軸上居中

- space-between：交叉軸上兩端對齊，軸線之間的間隔兩端分佈

- space-around：每個軸線兩側的間隔都相等。那麼，軸線之間的間隔是軸線與邊框之間間隔的兩倍

- stretch：默認值，軸線佔滿整個交叉軸