一、flex-direction屬性
row(默認值):主軸爲水平方向,起點在左端。
row-reverse:主軸爲水平方向,起點在右端。
column:主軸爲垂直方向,起點在上沿。
column-reverse:主軸爲垂直方向,起點在下沿。
<style> .box{ background: #0074D9; display: flex; flex-direction: row-reverse; } .box>div[class^="item"]{ color: #FFFFFF; } </style> <div class="box"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5">item5</div> </div>
二、flex-wrap屬性
nowrap(默認):不換行。
wrap:換行,第一行在上方。
wrap-reverse:換行,第一行在下方。
三、flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值爲row nowrap。
四、justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
flex-start(默認值):左對齊
flex-end:右對齊
center: 居中
space-between:兩端對齊,項目之間的間隔都相等。
space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
五、align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch(默認值):如果項目未設置高度或設爲auto,將佔滿整個容器的高度。
垂直居中
<style> .box{ background: #0074D9; display: flex; justify-content: center; align-items: center; width: 500px; height: 500px; } .box>div[class^="item"]{ color: #FFFFFF; } </style> <div class="box"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5">item5</div> </div>
六、align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。
space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(默認值):軸線佔滿整個交叉軸。