Day30 學習筆記

4月1號學習flex佈局原理。

下面是學習筆記。分為兩個部分：一個是根據直播做的截圖筆記（已製作為PDF檔案），另一部分是重點筆記（內容更精簡）。下面全部分享出來，一方面督促自己學習，另一方面歡迎大家交流分享~

截圖筆記2021_04_01。pdf重點筆記20210401 flex佈局原理。pdf

flex佈局各屬性預設情況：

預設主軸是行row

flex-direction：

row；

預設主軸上子元素排列方式從頭部開始

justify-content：

flex-start；

預設子元素不換行，即預設為單行

flex-wrap：

nowrap；

單行時，預設側軸上子元素排列方式

align-items：

flex-start；

設定為多行時，預設側軸上子元素排列方式

為普通的離散狀態

預設子專案佔的份數為0，即不填充剩餘父盒子空間

flex：

0；

align-self控制子項自己在側軸上的排列方式，預設繼承align-items狀態，即align-items： flex-start；

align-self：

auto；

order屬性定義專案排列順序，預設為0，即按照HTML中書寫順序載入

order：

0；

flex父項屬性及其屬性值總結：

屬性名

屬性值

flex-direction

row/row

reverse/column/column reverse

justify-content

flex-start/flex-end/center/space-around/space-between

flex-wrap

nowrap/wrap

align-items

flex-start/flex-end/center/stretch

align-content

flex-start/flex-end/center/space-around/space-between/stretch

flex-flow

flex-direction和flex-wrap的屬性值各自兩兩組合，用空格分開

z-index屬性調整壓蓋順序

order屬性調整專案的排列順序

值越大，表示越在上面不會被壓蓋

值越小，排列越靠前