彈性佈局(display:flex;)

display:flex屬性:

一,專案屬性

二,容器屬性

專案屬性:

1,flex-direction

2,flex-wrap

3,justify-content

4,align-items

5,align-content

flex-direction:

row(預設值):主軸為水平方向,起點在左端。

row-reverse:主軸為水平方向,起點在右端。

column:主軸為垂直方向,起點在上沿。

column-reverse:主軸為垂直方向,起點在下沿。

彈性佈局(display:flex;)

flex-wrap:

nowrap(預設):不換行。

wrap:換行,第一行在上方。

wrap-reverse:換行,第一行在下方。

justify-content:

flex-start(預設值):左對齊

flex-end:右對齊

center: 居中

space-between:兩端對齊,專案之間的間隔都相等。

space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

align-items:

flex-start:交叉軸的起點對齊。

flex-end:交叉軸的終點對齊。

center:交叉軸的中點對齊。

baseline: 專案的第一行文字的基線對齊。

stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

彈性佈局(display:flex;)

align-content:

定義了多根軸線的對齊方式,如果專案只有一根軸線,那麼該屬性將不起作用

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

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

center:與交叉軸的中點對齊。

space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。

space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch(預設值):軸線佔滿整個交叉軸。

彈性佈局(display:flex;)

justify-content和align-items組合

彈性佈局(display:flex;)