? 父元素:
o 主軸方向 flex-direction
1. row 主軸從左向右默認(rèn)值
18
2. row-revese 主軸從右向左
3. column 主軸從上到下
4. column-reverse 主軸從下到上
o 主軸方向排列方式 justify-content
1. flex-start 主軸起點(diǎn)默認(rèn)值
2. flex-end 主軸終點(diǎn)
3. center 居中
4. space-between 兩端對(duì)齊
5. space-around 中間的留白是兩邊的 2 倍
6. space-evenly 平均分配留白
o 交叉軸排列方式 align-items
1. stretch 拉伸默認(rèn)值去掉子元素的高度
2. flex-start 交叉軸的起點(diǎn)
3. flex-end 交叉軸的終點(diǎn)
4. center 居中
o 換行 flex-wrap
1 .nowrap 不換行,默認(rèn)值疟羹，會(huì)將子元素壓縮
2 .wrap 換行
3. wrap-reverse 反向換行
o 多行之間的排列方式 align-content
1. stretch 拉伸默認(rèn)值需要去掉子元素的高
2. flex-start 主軸起點(diǎn)依次排列
3. flex-end 主軸終點(diǎn)依次排列
4. center 居中
5. space-between 兩端對(duì)齊
6. space-around 中間的兩端的 2 倍
7. space-evenly 平均分配
? 子元素:
o 重寫子項(xiàng)對(duì)應(yīng)的交叉軸的對(duì)齊方式 align-self
1 .stretch 拉伸默認(rèn)值去掉子元素的高度
2. flex-start 交叉軸的起點(diǎn)
3. flex-end 交叉軸的終點(diǎn)
4. center 居中
5. 放大 flex-grow
6. 0不放大
7. 數(shù)值填充剩余的空間
o 壓縮 flex-shrink
1. 1壓縮
2. 0不壓縮
3. 實(shí)現(xiàn)導(dǎo)航的滾動(dòng)效果
a. 子項(xiàng)的寬度超出了父容器的寬度
b. 設(shè)置子項(xiàng)不壓縮 flex-shrink:0;
c. 父元素設(shè)置溢出顯示滾動(dòng)條 overflow-x:auto;
o 子項(xiàng)的寬度 flex-basis:數(shù)值+px 類似于寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 19
o 排序 order 數(shù)值值越大越向后，可以設(shè)置負(fù)數(shù)
