簡單描述我對彈性盒子的理解及使用方法
- 2022 年 7 月 20 日
- 筆記
一 .
1 什麼叫彈性盒子？
2 彈性盒子的特點，優劣勢？
3 怎麼去使用彈性盒子？
4 flex彈性盒子的注意事項有哪些？
/*************************************************解答**********************************************/
1. 彈性盒子也叫 Flexbox，是一種flex的布局效果，一般作用於手機端，在沒有誕生flex之前一般都是用流式布局丶浮動布局丶定位布局等等…來「創造」頁面，它最大的特點是有很大的布局分配能力。
2.先說他的
優點：flex布局有很多自定義屬性來完成分配空間的效果，並不需要計算，可以合理的分配空間，基本上新版的瀏覽器都能兼容。
缺點：假如元素在頁面是多行多列時，布局效果會很不盡人如意，一般情況下還是多用於移動端開發，解決不了檢查效果與分配空間。
3. 彈性盒子的使用：在網頁中我們把父級元素成為「容器」，它下面的第一層子元素成為「項目」，簡單來說就是爸爸稱為容器，他的子女稱為項目，孫子或者再往後都不能再這麼稱呼了。如果想使用單行盒子就給需要使用的空間元素添加(給父級添加) display：flex； 這時，此元素就成了flex的容器盒子，整個容器就能使用flex的相關屬性了。
4. flex的注意事項：① 子元素是依賴容器的元素，想要控制子元素的排序，依靠的是父級元素。 ② 設置父元素為彈性盒子，子元素的float將失效。 ③ 切記不要把flex與浮動布局或定位布局一起使用。 ④ 父級添加使用display:flex；子元素會塊狀化
二.
1. 主軸的排列方向？
2. 主軸的排序？
3. 項目的換行？
4. 主軸上的對齊方式？
5. 交叉軸的對齊方式？
6. 多行交叉軸的對其方式？
/*************************************************解答**********************************************/
1.主軸的排列方向：主軸分行模式 與 列模式兩種，也就是水平與垂直，同時也就有了正反兩個方向。
2. 主軸的排序：默認的是行模式 既 從左到右，分為以下幾種：
flex-direction:row; 默認值 行模式 正向排序
flex-direction:row-reverse; 默認值 行模式 反向排序
flex-direction:column; 默認值 列模式 正向排序
flex-direction:column-reverse; 默認值 列模式 反向排序
3. 項目的換行：默認是強制不換行。
flex-wrap：nowrap； 強制不換行
flex-wrap：wrap； 強制換行
4. 主軸上的對齊方式：
justify-content：定義項目在主軸上的對齊方式，注意需要區別行模式和列模式，在渲染之前，會先找到項目的排列方式在做渲染
justify-content: flex-start; 主軸起點對齊
justify-content: flex-end; 主軸終點對齊
justify-content: flex-center; 主軸居中
分配彈性元素的方式：
justify-content: space-between;主軸兩端對齊，每行首個元素貼近容器起點，每行尾個元素貼近容器重點，其餘剩餘空間均分
justify-content: space-around; 均勻排列每個元素，每個元素周圍分配相同的空間，如果遇到相鄰元素，就成了兩臂間隔
justify-content:space-evenly;每個項目元素之間的距離相等，均分所有空間
5. 交叉軸的對齊方式：
align-items 指的是項目在交叉軸對齊方式，但是有前提，交叉軸方向上要有富裕的空間
height: 300px;
align-items: flex-start; /*交叉軸起點對齊*/
align-items: flex-end; /*交叉軸終點對齊*/
align-items: center; /*交叉軸居中對齊*/
6.多行交叉軸的對齊方式：
多行顯示前提：有換行，並且在交叉軸方向上有空餘空間
align-content: flex-start;/* 3. 交叉軸起點對齊 */
align-content: flex-end;/* 3.1 交叉軸終點對齊 */
align-content: center;/* 3. 交叉軸居中 */
align-content: space-between;/* 3. 交叉軸兩端對齊 */
align-content: space-around;/* 3. 交叉軸環繞對齊，首尾一臂距離，相鄰元素兩臂距離 */
align-content: space-evenly;/* 3.交叉軸上每行元素之間距離相等，所有剩餘空間距離相等 */
