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