Flex佈局介紹

Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。

1 .box{
2     display: flex;
3 }

容器的屬性

1 flex-direction
2 flex-wrap
3 justify-content
4 align-items

lex-direction屬性

flex-direction屬性決定主軸的方向

1 .box {
2     flex-direction: row | row-reverse | column | column-reverse;
3 }

屬性值

flex-wrap屬性

flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

預設情況下，專案都排在一條線（又稱”軸線”）上。

• nowrap

• wrap

• wrap-reverse

flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap;即水平不換行。

justify-content屬性

justify-content屬性定義了專案在主軸上的對齊方式。

1 .box {
2     justify-content: flex-start | flex-end | center | space-between | space-around;
3 }

• flex-start（預設值）：左對齊

• flex-end：右對齊

• center： 居中

• space-between：兩端對齊，專案之間的間隔都相等。

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

align-items屬性

align-items屬性定義專案在交叉軸上如何對齊

1 .box {
2     align-items: flex-start | flex-end | center | baseline | stretch;
3 }

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

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

• center：交叉軸的中點對齊。

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

• stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。