1.彈性元素

+ 從元素類型分類

=> 行內元素 inline

=> 塊級元素 block

=> 行內塊級元素 inline-block

=> 彈性元素 flex(彈性元素不彈自己, 彈兒子)

2.彈性盒子：是用來控制子元素的布局的。

約定:

+ 我們管寫了 display: flex（形成彈性盒子的語句） 的元素叫做 彈性父元素（容器）

+ 管寫了 display: flex 的元素的直系子元素叫做 彈性子元素（所有彈性盒子里面的子元素）

特點：

????????1.元素如果變成彈性盒子，里面的子元素默認會橫向排列

? ? ? ? 2.當父元素變成彈性盒子之后。子元素無論是什么元素類型都能直接設置寬高

? ? ? ? 3.margin：auto是生效的

? ? ? ? 4.如果子元素總寬度大于父元素，那么是不會超出父盒子，也不會自動換行，而是會擠壓。

3.當一個元素開啟了彈性布局以后, 會在瀏覽器出現一些默認彈性情況

1. 會生成一條主軸

=> 主軸方向是從左到右

????????以下五點均是父元素身上的屬性

??????????????? ①主軸到底在哪個方向需要我們去設定。

? ? ? ????????? ????????如果主軸為橫向的，那么側軸就是縱向的

? ? ? ? ????????????????如果主軸為縱向的，那么側軸就是橫向的。

? ? ? ? ????????????????元素默認情況下都是沿著主軸排列的。???

????????????????②?如何設置主軸： flex-direction

? ? ? ? ????????????????row====將主軸設置為橫向，元素會從左到右橫向排列====默認值（常用）

? ? ? ? ????????????????row-reverse===元素會從右到左排列

? ? ? ? ????????????????column==將主軸設置為縱向，元素會從上到下縱向排列（常用）

? ? ? ? ????????????????column-reverse==從下到上排列

???????????????????③.設置子元素在主軸的對齊方式:justify-content

? ? ? ????????????????? flex-start===元素放在主軸的起點

? ? ? ????????????????? flex-end===元素放在主軸的終點

? ? ? ? ????????????????center===元素放在主軸的中間====常用

? ? ? ????????????????? space-between===元素的2端對齊（第一個和最后一個會貼邊，中間元素間距自動分配）===常用

? ? ? ????????????????? space-around===中間元素的間距是貼邊元素間距的2倍===常用

? ? ? ????????????????? space-evenly===元素與元素的間距完全是一樣的

? ? ????????????????④設置子元素在側軸（交叉軸）的對齊方式：align-items

? ? ? ????????????????? flex-start====元素放在側軸的起點

? ? ? ? ????????????????flex-end=====元素放在側軸的終點

? ? ? ????????????????? center=====元素放在側軸的中間====常用

? ? ? ????????????????? baseline===元素基線對齊（這個不做研究，大多數情況下和flex-start效果一樣）

? ? ? ????????????????? stretch====拉伸，要想看到效果子元素一定不能定寬度或者高度

? ? ? ? ? ????????????????? 如果側軸在縱向，就不能定高度

? ? ? ? ? ????????????????? 如果側軸在橫向，就不能定寬度

? ? ????????????????⑤如何讓子元素換行flex-wrap

? ? ? ? ????????????????nowrap===不換行，默認值

? ? ? ? ????????????????wrap===換行

? ? ? ? ????????????????wrap-reverse===反向換行

????????寫在子元素身上的屬性：

????????????????1.align-self====控制自己在側軸上的對齊方式（想當都調整誰，就給誰寫）

? ? ? ????????????????? flex-end

? ? ? ? ????????????????center

? ? ? ????????????????? baseline

? ? ? ? ????????????????stretch

? ? ????????2.order:排序，控制子元素的排列順序，數字越大越往后排，默認0，支持負數

? ? ? ? ????????????????注意：不帶單位

? ? ? ????????????????? 非必要不調整

? ????????? 3.flex:數字; ? 用來分配剩余空間的

? ????????? 4.flex-shrink：======元素是否擠壓，一般用于制作移動端的橫向滾動。

? ? ? ????????????????? a)0=====不擠壓

? ? ? ???????????????? b)1=====擠壓（默認值）

? ? ?

? ? 5.多行對齊方式（對于單行子元素，該屬性不起作用。）align-content

? ? ? ? flex-start===多行元素統一放在起點，行與行之間沒有間距

? ? ? ? flex-end===多行元素統一放在終點，行與行之間沒有間距

? ? ? ? center===多行元素統一放在中間，行與行之間沒有間距

? ? ? ? space-between===第一行和最后一行貼邊，中間行間距自動分配

? ? ? ? space-around====中間間距是貼邊間距的2倍

2. 會生成一條側軸

=> 側軸方向是從上到下

=> 側軸永遠垂直于主軸

3. 彈性子元素在主軸方向上的排列方式

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

4. 尺寸問題

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

=> 主軸方向尺寸默認是元素內容的尺寸, 如果沒有內容, 那么就是 0

=> 側軸方向尺寸默認是側軸長度, 父元素盒子長度

5. 彈性元素排列

=> 默認永不換行

=> 當子元素超出父元素范圍的時候, 會默認擠壓子元素內容區域

=> 當擠壓到內容區域, 不能繼續擠壓的時候, 直接溢出父盒子

6. 允許換行以后, 會出現多條臨時側軸

=> 換多少行, 出現多少個臨時側軸

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

4.書寫在彈性父元素身上的樣式

1. 主軸方向調整

=> 樣式: flex-direction

=> 取值:

-> 默認: row 橫向從左到右, 側軸從上到下

-> row-reverse 橫向從右到左, 側軸從上到下

-> column 縱向從上到下, 側軸從左到右

-> column-reverse 縱向從下到上, 側軸從左到右

=> 注意:

-> 主軸可以有四種方向選擇

-> 側軸只能是 從左到右 或者 從上到下

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

=> 樣式: justify-content

=> 取值:

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

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

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

-> space-between 把所有元素空余位置均分放在每兩個元素之間(6個元素, 5個空)

-> space-around 把所有元素空余位置均分放在每個元素的兩邊(6個元素, 12個空)

-> space-evenly 把所有元素空余位置坐一個絕對均分(6個元素, 7個空)

(注意: space-evenly, 安卓不好使, ios 好使)

3. 允許換行

=> 樣式: flex-wrap

=> 取值:

-> 默認: no-wrap 不允許換行

-> wrap 允許換行

-> wrap-reverse 允許換行并反轉

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

=> 樣式: align-items

=> 取值:

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

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

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

=> 注意: 當彈性子元素是多行的時候, 這個樣式是有效果的

-> 當多行的時候使用 align-items 是以每一個臨時側軸為基準進行位置調整

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

=> 樣式: align-content

=> 取值:

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

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

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

-> space-between 把所有行空余位置均分放在每兩行之間(3行, 2個空)

-> space-around 把所有行空余位置均分放在每行兩邊(3行, 6個空)

-> space-evenly 把所有行空余位置絕對均分(3行, 4個空)

=> 注意: 當彈性子元素為單行的時候, 這個樣式是沒有效果的???????

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 1000px;height: 800px;background-color: skyblue;/* 開啟彈性布局方式 */display: flex;/* 調整主軸方向 *//* flex-direction: column-reverse; *//* 元素在主軸方向上的排列方式 */justify-content: space-between;/* 主軸方向允許換行 */flex-wrap: wrap;/* 單行時側軸排列方式 */align-items: flex-end;/* 多行時側軸排列方式 *//* align-content: space-evenly; */}li {width: 100px;height: 100px;background-color: pink;font-size: 50px;line-height: 100px;color: #fff;text-align: center;}</style> </head> <body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul></body> </html>

?效果圖：?

????????????????????????彈性子元素相關樣式

彈性子元素相關的樣式

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

=> 多行的時候, 是單獨調整自己在單獨側軸上的排列方式

=> 樣式: align-self

=> 取值:

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

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

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

2. 元素順序排列

=> 樣式: order

=> 取值: 一個數字, 數字越大越靠后

3. 元素的默認尺寸設置

=> 樣式: flex

=> 取值: 一個數字, 按比例計算

=> 計算方式

-> 當你給多個元素設置了 flex 樣式以后

-> 首先計算非固定尺寸以外的數據(以下面結構為例, 剩余尺寸是 600)

-> 計算所有帶有 flex 樣式的元素的總和作為基數(以下面結構為例, flex 總基數就是 30)

-> 按照每一個元素的 flex 份數開始分配總剩余空間

+ 以下面結構為例

+ 2號元素就占據 600 的 8/30

+ 4號元素就占據 600 的 22/30

=> 注意:

-> 當我們不開啟換行的時候, 元素如果超出父元素范圍, 會擠壓元素

-> 當你有了 flex 的元素, 會優先擠壓

-> 擠壓到 flex 的元素不能繼續擠壓了, 才會開始去擠壓固定寬度元素

4. 是否允許擠壓元素

=> 樣式: flex-shrink

=> 取值: 0 or 1

-> 0 表示不參與壓縮

-> 1 表示參與壓縮

????????

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}ul {width: 1000px;height: 800px;background-color: skyblue;margin: 50px auto;display: flex;/* 側軸方向上的排列 */align-items: center;/* flex-wrap: wrap; */}li {width: 100px;height: 100px;background-color: pink;font-size: 40px;color: #fff;/* display: flex;justify-content: center;align-items: center; */line-height: 100px;text-align: center;}/* 單獨調整每一個元素自己在側軸上的位置 *//* li:nth-child(2) {align-self: flex-start;}li:nth-child(5) {align-self: flex-end;} *//* li:nth-child(3) {order: 9999;} */li:nth-child(2) {/* 表示 2號 li 元素不參與壓縮 */flex-shrink: 0;}</style> </head> <body><ul><!-- <li style="width: 100px;">1</li><li style="flex: 4;">2</li><li style="width: 100px;">3</li><li style="width: 100px;">4</li><li style="flex: 6;">5</li><li style="width: 100px;">6</li> --><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul> </body> </html>

效果圖：

總結

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

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