[TOC] #### 1. 創(chuàng)建 flex 容器 --- 給任何一個元素添加 `display: flex;` 就可以創(chuàng)建一個 flex 塊級容器 | 屬性 | 描述 | | ------------ | ------------ | | display: flex; | 創(chuàng)建 flex 塊級容器 | | display: inline-flex; | 創(chuàng)建 flex 行內(nèi)容器 ```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> ```  通過上面代碼可以得出兩個結(jié)論 1\. 無論元素是什么類型，只要設置了 `display: flex;`，該元素就會被設置為 flex 塊級元素。span 上行內(nèi)元素，不能設置寬高，因為被設置為了 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 | 分散對齊: 剩余空間在每個項目兩側(cè)平均分配 | | space-evenly | 平均對齊: 剩余空間在每個項目之間平均分配 | #### 4. 交叉軸項目對齊方式 --- 只有一個屬性: `align-items`，常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | flex-start | 所有項目與交叉軸起始線對齊【默認值】 | | flex-end | 所有項目與交叉軸終止線對齊 | | center | 居中對齊: 所有項目與交叉軸中間線對齊 | 特別注意: 單行容器中，交叉軸中只有一行項目，所有剩余空間不需要在項目間進行分配，因此沒有像主軸對齊的三個屬性值: `space-between`, `space-around`,`space-evenly` #### 5. 多行容器項目對齊方式 --- 只有一個屬性: `align-content`，常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | stretch | 項目拉伸占據(jù)整個交叉軸【默認值】 | | flex-start | 所有項目與交叉軸起始線對齊 | | flex-end | 所有項目與交叉軸終止線對齊 | | center | 居中對齊: 所有項目與交叉軸中間線對齊 | | space-between | 兩端對齊: 剩余空間在頭尾項目之外的項目間平均分配 | | space-around | 分散對齊: 剩余空間在每個項目兩側(cè)平均對齊 | | space-evenly | 平均對齊: 剩余空間在每個項目之間平均分配 | #### 6. 單個項目在交叉軸上的的對齊方式 --- 只有一個屬性: `align-self`，常用屬性值如下表 | 屬性值 | 描述 | | ------------ | ------------ | | auto | 繼承 align-items 屬性值【默認值】 | | flex-start | 與交叉軸起始線對齊 | | flex-end | 與交叉軸終止線對齊 | | center | 與交叉軸中間線對齊 | | stretch | 在交叉軸方向上拉伸 | | baseline | 與基線對齊（用的極少） | #### 7. 單個項目的排列順序 --- `order` 屬性 | 屬性值 | 描述 | | ------------ | ------------ | | 0 | 按照書寫順序排列【默認值】 | | n | 值越大，越靠后顯示（值可正可負） | #### 8. 項目在主軸上的放大因子 --- `flex-grow` 屬性 在主軸上存在剩余空間時，該屬性才有意義。該屬性的值稱為放大因子，常見的屬性值如下: | 屬性值 | 描述 | | ------------ | ------------ | | 0 | 不放大，保持原值【默認值】 | | n | 放大因子（正整數(shù)） | #### 9. 項目在主軸上的縮小因子 --- `flex-shrink` 屬性 在主軸上空間容納不下所有項目時，`flex-shrink` 才有意意義，該屬性的值稱為縮小因子，常見的屬性值如下: | 屬性值 | 描述 | | ------------ | ------------ | | 1 | 允許縮小適應主軸空間變化【默認值】 | | 0 | 不縮小，保持原始大小 | | n | 縮小因子，正整數(shù) | #### 10. 項目在主軸上的計算基準尺寸 --- `flex-basis` 屬性 1\. 在分配多余空間之前，項目占據(jù)的主軸空間 2\. 瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間 3\. 該屬性會覆蓋項目原始大小（`width/height`） 4\. 該屬性會被項目的 `min-width，min-height` 值覆蓋 ``` 優(yōu)先級: width/height < flex-basis < min-width/min-height ``` | 屬性值 | 描述 | | ------------ | ------------ | | auto | 項目原來的大小【默認值】 | | px | 像素 | | % | 百分比 | #### 11. 項目縮放的簡寫 --- 項目放大，縮小與計算尺寸，對于項目非常重要，也很常用。每次都要寫這三個屬性，非常的麻煩，且沒有必要，flex 屬性可以將上面三個屬性簡化，語法格式: ```css flex: flex-grow flex-shrink flex-basis; ``` **三值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 第一個值：整數(shù) | flex-grow | | 第二個值：整數(shù) | flex-shrink | | 第三個值：有效寬度 | flex-basis | 舉例 | 案例 | 描述 | | ------------ | ------------ | | flex: 0 1 auto; | 不放大，可收縮，初始寬度【默認值】 | | flex: 1 1 auto; | 項目自動放大或收縮適應容器 | | flex: 0 0 100px; | 按計算大小填充到容器中 | **雙值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 第一個值：整數(shù) | flex-grow | | 第二個值：有效寬度 | flex-basis | 舉例 | 案例 | 描述 | | ------------ | ------------ | | flex: 0 100px; | 禁止放大，按計算大小填充到容器中 | **單值語法:** | 屬性值 | 描述 | | ------------ | ------------ | | 整數(shù) | flex-grow | | 有效寬度 | flex-basis | | 關(guān)鍵字 | 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 |