彈性元素

- display：flex

- 可以將寫了display：flex的元素叫做彈性父元素，它的直系子元素叫做彈性子元素

默認(rèn)彈性情況

- 當(dāng)元素開啟彈性布局后，瀏覽器會出現(xiàn)一些默認(rèn)彈性情況

1. 生成一條主軸

- 主軸方向從左到右

2. 生成一條側(cè)軸

- 側(cè)軸方向從上到下

- 側(cè)軸永遠(yuǎn)垂直于主軸

3. 彈性子元素在主軸的排序方式

- 默認(rèn)從主軸開始方向向結(jié)束方向排列

4. 尺寸問題

- 當(dāng)彈性子元素不設(shè)置寬高的時(shí)候

????????- 主軸方向的尺寸默認(rèn)是元素內(nèi)容的尺寸，如果沒有內(nèi)容就是0

- 側(cè)軸方向的尺寸默認(rèn)是側(cè)軸長度，也就是父元素盒子的長度

5. 彈性元素排列

- 默認(rèn)用不換行

????????- 當(dāng)子元素超過父親元素范圍的時(shí)候，會默認(rèn)擠壓子元素內(nèi)容區(qū)域

- 當(dāng)無法繼續(xù)擠壓直接溢出父元素盒子

6. 換行

- 當(dāng)允許換行以后，還多少行出現(xiàn)多少個(gè)臨時(shí)側(cè)軸

- 多條臨時(shí)側(cè)軸的長度是一致的

彈性父元素的樣式

1. 主軸方向調(diào)整

- flex- direction

- 取值

- 默認(rèn) row 橫向從左到右，側(cè)軸從上到下

????????- 反轉(zhuǎn) row- reverse 橫向從右到左，側(cè)軸從上到下

??????? - 縱向 column 縱向從上到下，側(cè)軸從左到右

????????- 反轉(zhuǎn) column-reverse 縱向從下到上，側(cè)軸從左到右

- 注意??：主軸可以有四個(gè)方向選擇，側(cè)軸只能是從左到右 或者從上到下

2. 元素在主軸上的排列方式

- justify-content

- 取值

??????? - 默認(rèn) flex-start 把所有元素當(dāng)做一個(gè)整體排列在主軸開始位置

??????? - flex-end 把所有元素當(dāng)做一個(gè)整體排列在主軸結(jié)束位置

??????? - center 把所有元素當(dāng)做一個(gè)整體排列在主軸居中位置

??????? - space-between 把所有元素空余位置均分放在每兩個(gè)元素之間

??????? - space-around 把所有元素空余位置均分放在每個(gè)元素的兩邊

??????? - space-evenly 把所有元素空余位置絕對均分

3. 允許換行

?- flex-wrap

?- 取值

??????? - 默認(rèn) no-warp 不允許換行

??????? - warp 允許換行

??????? - warp-reverse 允許換行并反轉(zhuǎn)

4. 單行時(shí)側(cè)軸的排列方式

- align-items

- 取值

??????? - 默認(rèn) flex-start 在側(cè)軸開始排列

??????? - flex-end 在側(cè)軸結(jié)束排列

??????? - center 在側(cè)軸居中位置排列

- 當(dāng)多行時(shí)使用align-items是有效果的

5. 多行時(shí)側(cè)軸的排列方式

- align-content

- 取值

??????? - flex-start 把所有行元素當(dāng)作一個(gè)整體排列在整體側(cè)軸開始位置

??????? - flex-end 把所有行元素當(dāng)作一個(gè)整體排列在整體側(cè)軸結(jié)束位置

??????? - center 把所有行元素當(dāng)作一個(gè)整體排列在整體側(cè)軸居中位置

??????? - space-between 把所有行空余位置均分放在兩行之間

??????? - space-around 把所有行空余位置均分放在每行兩邊

??????? - space-evenly 把所有行空余位置絕對均分

- 注意??：當(dāng)彈性子元素為單行時(shí)，這個(gè)樣式是沒有效果的

彈性子元素的相關(guān)樣式

1. 單獨(dú)調(diào)整自己在側(cè)軸上的排列位置

- align-self

- 取值

??????? - flex-start??????? 自己放在側(cè)軸的開始????????

??????? - flex-end??????? 自己放在側(cè)軸的結(jié)束

??????? - center???????? 自己放在側(cè)軸的中間

2. 元素順序排列

- order

- 取值

??????? - 一個(gè)數(shù)字，數(shù)字越大越靠后

??????? - eg： order:100

3. 元素的默認(rèn)尺寸設(shè)置

- flex

- 取值

??????? - 一個(gè)數(shù)字，按照比例計(jì)算 flex

4. 是否允許擠壓元素

- flex-shrink

- 取樣

??????? - 0 or 1

??????? - 0 表示不參與壓縮

??????? - 1 表示參與壓縮

總結(jié)

以上是生活随笔為你收集整理的CSS盒子模型 - 弹性盒模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。