[TOC] #### 1. 創建 flex 容器 --- 給任何一個元素添加 `display: flex;` 就可以創建一個 flex 塊級容器 | 屬性 | 描述 | | ------------ | ------------ | | display: flex; | 創建 flex 塊級容器 | | display: inline-flex; | 創建 flex 行內容器 ```html <style> .container { background-color: #abcdef; width: 100px; height: 100px; display: flex; } .item { width: 150px; height: 50px; background-color: pink; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> </div> <span class="container"> <div class="item">1</div> <div class="item">2</div> </span> ``` ![](https://img.itqaq.com/art/content/6193299cb21ae259e46ac6d78b4d3498.png) 通過上面代碼可以得出兩個結論 1\. 無論元素是什么類型,只要設置了 `display: flex;`,該元素就會被設置為 flex 塊級元素。span 上行內元素,不能設置寬高,因為被設置為了 flex 容器,所以上面代碼中 span 元素也能被設置寬高 2\. 子元素在主軸方向上排列時,如果超出了容器的寬度,會忽略自身的寬度,自適應容器寬度的變化。上面代碼中子元素寬度被設定為 150px,但是實際展示的是 50px #### 2. 主軸方向與多行容器 --- **設置容器的主軸方向和多行容器** | 屬性 | 描述 | | :------------: | :------------: | | flex-direction | 設置主軸方向 | | flex-wrap | 設置多行容器 | | flex-flow | flex-direction 和 flex-wrap 的縮寫 | **flex-direction 屬性值** | 屬性值 | 描述 | | ------------ | ------------ | | row | 主軸為水平方向(從左到右),默認值 | | row-reverse | 主軸為水平方向(從右到左) | | column | 主軸為垂直方向(從上到下) | | column-reverse | 主軸為垂直方向(從下到上) | **flex-wrap 屬性值** | 屬性值 | 描述 | | ------------ | ------------ | | nowrap | 不換行,項目寬度超出容器寬度時會忽略項目尺寸,默認值 | | wrap | 允許換行,項目寬度超出容器寬度時自動換行 | **flex-flow 屬性值** ``` flex-flow: 主軸方向 多行容器(是否換行); ``` | 屬性值 | 描述 | | ------------ | ------------ | | flex-flow: row nowrap; | 主軸為水平方向且不換行,默認值 | | flex-flow: row wrap; | 主軸為水平方向且允許換行 | | flex-flow: column nowrap; | 主軸為垂直方向且不換行 | | flex-flow: column wrap; | 主軸為垂直方向且允許換行 | #### 3. 主軸項目對齊方式 --- 只有一個屬性: `justify-content`,常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 所有項目與主軸起始線對齊【默認值】 | | flex-end | 所有項目與主軸終止線對齊 | | center | 居中對齊: 所有項目與主軸中間線對齊 | | space-between | 兩端對齊: 剩余空間在頭尾項目之外的項目間平均分配 | | space-around | 分散對齊: 剩余空間在每個項目兩側平均分配 | | space-evenly | 平均對齊: 剩余空間在每個項目之間平均分配 | #### 4. 交叉軸項目對齊方式 --- 只有一個屬性: `align-items`,常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 所有項目與交叉軸起始線對齊【默認值】 | | flex-end | 所有項目與交叉軸終止線對齊 | | center | 居中對齊: 所有項目與交叉軸中間線對齊 | 特別注意: 單行容器中,交叉軸中只有一行項目,所有剩余空間不需要在項目間進行分配,因此沒有像主軸對齊的三個屬性值: `space-between`, `space-around`,`space-evenly` #### 5. 多行容器項目對齊方式 --- 只有一個屬性: `align-content`,常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | stretch | 項目拉伸占據整個交叉軸【默認值】 | | flex-start | 所有項目與交叉軸起始線對齊 | | flex-end | 所有項目與交叉軸終止線對齊 | | center | 居中對齊: 所有項目與交叉軸中間線對齊 | | space-between | 兩端對齊: 剩余空間在頭尾項目之外的項目間平均分配 | | space-around | 分散對齊: 剩余空間在每個項目兩側平均對齊 | | space-evenly | 平均對齊: 剩余空間在每個項目之間平均分配 | #### 6. 單個項目在交叉軸上的的對齊方式 --- 只有一個屬性: `align-self`,常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | auto | 繼承 align-items 屬性值【默認值】 | | flex-start | 與交叉軸起始線對齊 | | flex-end | 與交叉軸終止線對齊 | | center | 與交叉軸中間線對齊 | | stretch | 在交叉軸方向上拉伸 | | baseline | 與基線對齊(用的極少) | #### 7. 單個項目的排列順序 --- `order` 屬性 | 屬性值 | 描述 | | ------------ | ------------ | | 0 | 按照書寫順序排列【默認值】 | | n | 值越大,越靠后顯示(值可正可負) | #### 8. 項目在主軸上的放大因子 --- `flex-grow` 屬性 在主軸上存在剩余空間時,該屬性才有意義。該屬性的值稱為放大因子,常見的屬性值如下: | 屬性值 | 描述 | | ------------ | ------------ | | 0 | 不放大,保持原值【默認值】 | | n | 放大因子(正整數) | #### 9. 項目在主軸上的縮小因子 --- `flex-shrink` 屬性 在主軸上空間容納不下所有項目時,`flex-shrink` 才有意意義,該屬性的值稱為縮小因子,常見的屬性值如下: | 屬性值 | 描述 | | ------------ | ------------ | | 1 | 允許縮小適應主軸空間變化【默認值】 | | 0 | 不縮小,保持原始大小 | | n | 縮小因子,正整數 | #### 10. 項目在主軸上的計算基準尺寸 --- `flex-basis` 屬性 1\. 在分配多余空間之前,項目占據的主軸空間 2\. 瀏覽器根據這個屬性,計算主軸是否有多余空間 3\. 該屬性會覆蓋項目原始大?。╜width/height`) 4\. 該屬性會被項目的 `min-width,min-height` 值覆蓋 ``` 優先級: width/height < flex-basis < min-width/min-height ``` | 屬性值 | 描述 | | ------------ | ------------ | | auto | 項目原來的大小【默認值】 | | px | 像素 | | % | 百分比 | #### 11. 項目縮放的簡寫 --- 項目放大,縮小與計算尺寸,對于項目非常重要,也很常用。每次都要寫這三個屬性,非常的麻煩,且沒有必要,flex 屬性可以將上面三個屬性簡化,語法格式: ```css flex: flex-grow flex-shrink flex-basis; ``` **三值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 第一個值:整數 | flex-grow | | 第二個值:整數 | flex-shrink | | 第三個值:有效寬度 | flex-basis | 舉例 | 案例 | 描述 | | ------------ | ------------ | | flex: 0 1 auto; | 不放大,可收縮,初始寬度【默認值】 | | flex: 1 1 auto; | 項目自動放大或收縮適應容器 | | flex: 0 0 100px; | 按計算大小填充到容器中 | **雙值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 第一個值:整數 | flex-grow | | 第二個值:有效寬度 | flex-basis | 舉例 | 案例 | 描述 | | ------------ | ------------ | | flex: 0 100px; | 禁止放大,按計算大小填充到容器中 | **單值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 整數 | flex-grow | | 有效寬度 | flex-basis | | 關鍵字 | initial,auto,none | 舉例 | 案例 | 描述 | | ------------ | ------------ | | flex: 1 | flex: 1 1 auto | | flex: 180px | flex: 1 1 180px | | initial | flex: 0 1 auto 【默認值】| | auto | flex: 1 1 auto | | none | flex: 0 0 auto |