flex布局筆記

水平主軸，垂直交叉軸display: flex; //inline-flex行內flex-direction: row; //主軸的方向，還有column column-reverse 反轉flex-wrap: wrap; //容器內是否允許換行 nowrap/wrap/wrap-reversejustify-content: flex-start; //專案在主軸的對齊方式 flex-start/flex-end/center/space-between/space-around.align-items: stretch; //專案在交叉軸上的對齊方式 flex-start/flex-end/center/baseline/stretchalign-content: flex-start; //多根軸線的對齊方式 flex-end/center/space-between/space-around/stretch

order: 0 //定義專案在容器中的順序，預設是0flex: flex-grow, flex-shrink, flex-basis //預設是 0 1 autoalign-self: auto //執行單個專案有不一樣的對齊方式 flex-start/flex-end/center/baseline/stretch

(flex-grow 定義專案的放大比例，容器在主軸上必須要有剩餘空間才能擴大，各項目的最終大小=各項目的flex-basis + 擴大得到的大小flex-shrink定義專案的縮小比例，容器在主軸上空間不足以放下所有專案，各項目的大小 = 各項目的flex-basis - 瓜分得到的縮小份額flex-basis 在flex專案放大縮小之前，各專案佔據主軸空間的基值，預設auto，即專案本來大小flex: 1; 快捷值 1 === 1 1 0%flex：0; 快捷值 0 === 0 1 0%flex：24px/1%; 快捷值 1 1 24px/1%為flex-basis的值flex: 2 3; 快捷值 2 3 === 2 3 0%flex: 11 30px; 快捷值 11 30px === 11 1 32px)

flex布局**， 2023年日出的一種布局，先以及被所有瀏覽器支援

flex：主軸和交叉軸，容器和專案

容器相關css

flex-direction: row/column

row 表示裡面的專案從左往右排列

column 表示裡面的專案從上到下排列

專案相關css

flex: 0 1 auto; // 預設不擴大，會縮小，空間自動填充

第乙個是 flex-grow 屬性，預設為0；表示如果存在剩餘空間，也不放大

第二個是 flex-shrink屬性，預設為1；表示如果空間不足，該專案會縮小

第三個是 flex-basis屬性，預設為auto；表示瀏覽器會根據這個屬性自動推演專案的寬度和高度；這個值可以寫 auto, 10%, 50px

一般這個flex 屬性寫快捷值，讓瀏覽器去自動推算專案的相關值

flex: none; // 等價於 flex:0 0 auto 表示不擴大，不縮小，自動寬高

flex: auto; //等價於 flex: 1 1 auto 表示可擴大，可縮小，自動計算寬高

flex: 1; //等價於 flex: 1 1 0% 表示可擴大，可縮小，尺寸自動計算

還有其他的寫法目前不推薦

flex: 1 1;

flex: 8; // === flex: 8 1 0%;

擴充套件 flex-basis 和寬度width flex-basis 的含義在不斷的改進，簡單可理解為專案的寬度或高度

flex-basis 和width 如果同時設定，以flex-basis為準.

item

使用了 item類的元素最後的寬度為200px

flex-basis 和 max-width/min-width 如果同時設定, 這會被限制

item1

使用了item1的元素，最後寬度為100px (即max-width最大寬度或最小寬度)

box-sizing: border-box;

就是說設定乙個盒子的寬度之後，盒子的邊框，內邊界，都會在這個寬度裡面，不會再增加盒子的寬度了

width = border + padding + 內容的 width_1

flex-basis計算寬度時，是按照父盒子的內容的width_1來計算的，不是外面盒子的總寬度

flex布局筆記

flex布局筆記

flex布局筆記

Flex布局筆記

相關推薦