彈性元素

- display：flex

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

默認彈性情況

- 當元素開啟彈性布局后，瀏覽器會出現一些默認彈性情況

1. 生成一條主軸

- 主軸方向從左到右

2. 生成一條側軸

- 側軸方向從上到下

- 側軸永遠垂直于主軸

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

- 默認從主軸開始方向向結束方向排列

4. 尺寸問題

- 當彈性子元素不設置寬高的時候

????????- 主軸方向的尺寸默認是元素內容的尺寸，如果沒有內容就是0

- 側軸方向的尺寸默認是側軸長度，也就是父元素盒子的長度

5. 彈性元素排列

- 默認用不換行

????????- 當子元素超過父親元素范圍的時候，會默認擠壓子元素內容區域

- 當無法繼續擠壓直接溢出父元素盒子

6. 換行

- 當允許換行以后，還多少行出現多少個臨時側軸

- 多條臨時側軸的長度是一致的

彈性父元素的樣式

1. 主軸方向調整

- flex- direction

- 取值

- 默認 row 橫向從左到右，側軸從上到下

????????- 反轉 row- reverse 橫向從右到左，側軸從上到下

??????? - 縱向 column 縱向從上到下，側軸從左到右

????????- 反轉 column-reverse 縱向從下到上，側軸從左到右

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

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

- justify-content

- 取值

??????? - 默認 flex-start 把所有元素當做一個整體排列在主軸開始位置

??????? - flex-end 把所有元素當做一個整體排列在主軸結束位置

??????? - center 把所有元素當做一個整體排列在主軸居中位置

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

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

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

3. 允許換行

?- flex-wrap

?- 取值

??????? - 默認 no-warp 不允許換行

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

??????? - warp-reverse 允許換行并反轉

4. 單行時側軸的排列方式

- align-items

- 取值

??????? - 默認 flex-start 在側軸開始排列

??????? - flex-end 在側軸結束排列

??????? - center 在側軸居中位置排列

- 當多行時使用align-items是有效果的

5. 多行時側軸的排列方式

- align-content

- 取值

??????? - flex-start 把所有行元素當作一個整體排列在整體側軸開始位置

??????? - flex-end 把所有行元素當作一個整體排列在整體側軸結束位置

??????? - center 把所有行元素當作一個整體排列在整體側軸居中位置

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

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

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

- 注意??：當彈性子元素為單行時，這個樣式是沒有效果的

彈性子元素的相關樣式

1. 單獨調整自己在側軸上的排列位置

- align-self

- 取值

??????? - flex-start??????? 自己放在側軸的開始????????

??????? - flex-end??????? 自己放在側軸的結束

??????? - center???????? 自己放在側軸的中間

2. 元素順序排列

- order

- 取值

??????? - 一個數字，數字越大越靠后

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

3. 元素的默認尺寸設置

- flex

- 取值

??????? - 一個數字，按照比例計算 flex

4. 是否允許擠壓元素

- flex-shrink

- 取樣

??????? - 0 or 1

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。