# Flex 容器屬性 [TOC] **容器屬性匯總:** | 序號 | 屬性 | 描述 | | :--: | :-------------- | :------------------------------------------------ | | 1 | flex-direction | 主軸方向(即項目排列方向) | | 2 | flex-wrap | 當多個項目在一行排列不下時,如何換行 | | 3 | flex-flow | flex-direction,flex-wrap 的簡寫,默認:`row nowrap` | | 4 | justify-content | 項目在主軸上對齊方式 | | 5 | align-items | 項目在交叉軸上的對齊方式 | | 6 | align-content | 項目在多根軸線上的對齊方式,只有一根軸線無效 | --- ## 1. flex-direction - **功能**: 決定項目在主軸上的排列方向 - 它有四個可能的值: | 序號 | 屬性值 | 描述 | | ---- | -------------- | -------------------------------- | | 1 | row 默認值 | 主軸為水平方向,起點在左邊 | | 2 | row-reverse | 主軸為水平方向, 起點在右邊(反轉) | | 3 | column | 主軸為垂直方向, 起點在上邊 | | 4 | column-reverse | 主軸為垂直方向, 起點在下邊 | - CSS 語法: ```css .container { display: flex; flex-direction: row | row-reverse | column | column-reverse; } ``` - 示意圖:  --- ## 2. flex-wrap - **功能**: 多個項目默認排列在一根軸線上,該屬性定義了當一根軸線排列不下時,多作的項目的換行方式 | 序號 | 屬性值 | 描述 | | ---- | ------------- | -------------------------------------------- | | 1 | nowrap 默認值 | 不換行 | | 2 | wrap | 自動換行, 第一行排列不下, 自動轉到下一行 | | 3 | wrap-reverse | 自動反向換行, 第一行顯示在下方, 與 wrap 相反 |  - CSS 語法 ```css .container { display: flex; flex-wrap: nowrap | wrap | wrap-reverse; } ``` - 屬性值說明: - `nowrap`: (默認值)不換行  - `wrap`: 自動換行  - `wrap-reverse`: 自動反向換行  --- ## 3. flex-flow flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值為`row nowrap` ```css .container { display: flex; flex-flow: [flex-direction] || [flex-wrap]; /*默認*/ flex-flow: row nowrap; } ``` --- ## 4. justity-content - **功能**: 設置項目在主軸上的對齊方式 - CSS 語法: ```css .container { display: flex; justify-content: flex-start | flex-end | center | space-between | space-around; } ``` - 屬性值說明 | 序號 | 屬性值 | 描述 | | ---- | ----------------- | ------------------------------------------------- | | 1 | flex-start 默認值 | 左對齊 | | 2 | flex-end | 右對齊 | | 3 | center | 居中對齊 | | 4 | space-between | 兩端對齊: 項目之間間隔相等 | | 5 | space-around | 項目兩側間隔相等,即項目之間間隔是項目到兩端的二倍 | - 示意圖:  --- ## 5. align-items - **功能:** 該屬性設置項目在交叉軸上的對齊方式 - CSS 語法: ```css .container { display: flex; align-items: flex-start | flex-end | center | baseline | stretch; } ``` - 屬性值說明: | 序號 | 屬性值 | 描述 | | ---- | -------------- | ------------------------------------------------------------ | | 1 | flex-start | 與交叉軸起點對齊, 即: 頂對齊 / 上對齊 | | 2 | flex-end | 與交叉軸終點對齊, 即: 底對齊 / 下對齊 | | 3 | center | 與交叉軸中間線對齊, 即: 居中對齊 | | 4 | baseline | 與項目中第一行文本的基線對齊, 即文本的下邊線 | | 5 | stretch 默認值 | 自動伸展到容器的高度(項目未設置高度或將高度設置為 auto 有效) | - 示意圖:  --- ## 6. align-content - `align-items`和`align-content`有相同的功能，不過不同點是它是用來讓每一個單行的容器居中而不是讓整個容器居中 - `align-content`屬性只適用于**多行**的 flex 容器，并且當交叉軸上有多余空間使 flex 容器內的 flex 線對齊 - `align-items`屬性適用于所有的 flex 容器，它是用來設置每個 flex 元素在交叉軸上的默認對齊方式 - 該屬性的重點,在于**多行項目**, 這是與`align-items`最重要的區別 - CSS 語法: ```css .container { display: flex; align-content: flex-start | flex-end | center | space-between | space-around | stretch; } ``` - 屬性值說明: | 序號 | 屬性值 | 描述 | | ---- | -------------- | ------------------------------------------- | | 1 | flex-start | 與交叉軸起點對齊 | | 2 | flex-end | 與交叉軸終點對齊 | | 3 | center | 與交叉軸中間點對齊 | | 4 | space-between | 與交叉軸兩端對齊, 軸線之間間隔相等 | | 5 | sapce-around | 每根軸線間隔相等,軸線間隔比軸線到邊框大一倍 | | 6 | stretch 默認值 | 軸線占滿整個交叉軸 | - 示意圖:  --- ## 總結 ### 一個彈性盒子容器的默認狀態如下: ```css .container { /*彈性布局*/ display: flex; /*以下彈性盒子容器全部屬性以及默認值,即彈性盒子的默認狀態*/ /*1. 主軸方向: 行(水平)*/ flex-direction: row; /*2. 多個項目換行方式: 不換行*/ flex-wrap: nowrap; /*3. 多個項目在主軸上的排列與換行方式的簡寫*/ flex-flow: row nowrap; /*4. 多個項目在主軸上的對齊方式: 左對齊*/ justify-content: flex-start; /*5. 多個項目在交叉軸上的對齊方式: 自動伸展到容器高度*/ align-items: stretch; /*6. 多個項目分為多行時, 在交叉軸上排列方式: 充滿整個交叉軸*/ align-content: stretch; } ``` ### 屬性總結: - 設置項目在主軸上的排列方向與換行方式 - `flex-direction`: 項目在主軸上的排列方向 - `flex-wrap`: 項目在主軸上的換行方式 - `flex-flow`: 以上屬性的縮寫,默認: `row nowrap` - 設置項目在主軸上的對齊方式 - `justity-content`: 項目在主軸上的對齊方式 - 設置項目在交叉軸上的對齊方式 - `align-items`: 適用于項目**單行**排列方式 - `align-content`: 適合于項目**多行**排列方式