• CSS3 彈性盒子(Flex Box)

注意點：

1. 行內元素也可以使用 Flex 佈局。
2. 設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
3. 彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
4. 彈性盒子裡面的子元素設定外邊距不會合並。

容器屬性

以下4個屬性設定在容器上。

• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

1.flex-direction屬性 flex-direction屬性決定主軸的方向（即專案的排列方向）。 寫法：flex-direction: column-reverse; | column | row | row-reverse; row 水平方向為主軸方向 。 column 垂直方向為主軸方向。 2.flex-wrap屬性 預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。 寫法：flex-wrap: nowrap | wrap | wrap-reverse; 3.justify-content justify-content屬性定義了專案在主軸上的對齊方式。 寫法：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; flex-start:左對齊（預設值） flex-end：右對齊 center：居中 space-between：兩端對齊，專案之間的間隔相等。 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。 space-evenly：兩個專案之間的距離相等。 4.align-ltems align-items屬性定義專案在交叉軸上如何對齊。 align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 專案的第一行文字的基線對齊。
• stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

專案屬性

以下3個屬性設定在專案上。

• flex-grow
• flex-shrink
• align-self

1.flex-grow (放大) flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。 寫法：.item { flex-grow: ; /* default 0 */ } 2.flex-shrink (縮小) flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。 3.align-self 屬性 align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。 寫法：.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 除了auto，用法與align-items完全一致。    2022-03-09 17:25:00