彈性布局flex知識點和常用點

justify-content:彈性元素們在主軸上的對齊方式

align-items:彈性元素們在側軸上的對齊方式

flex-wrap:決定彈性元素溢位容器時的換行方式

align-content:用於修改換行後（設定了flex-wrap），在多**況下，行與行之間的對齊方式。

order:規定了彈性子元素的排列。從小到大排列，可以通過改變個別元素order的大小來改變其在容器中的排列情況。

align-self:用於單獨設定自身在側軸的對齊方式。

flex:指定彈性子元素如何分配空間（flex-grow flex-shrink flex- basis）

flex-grow: 值只能為數字，不能為單位和百分數

flex-shrink：值只能為數字，不能為單位和百分數

flex- basis：值不能為數字，可以為單位和百分數

1.如果為3個值的話，必須2個是數字，乙個是單位或者百分數，順序可以改變

2.匹配優先順序：flex-grow > flex-shrink > flex- basis

3.比如：

flex:1 === 1,1,0%

flex:auto === 1,1,auto

flex:none === 0,0,auto

flex:0% === 1,1,0%

flex:1,2 === 1,2,0%

flex-basis

flex-basis:屬性用於設定或檢索彈性盒伸縮基準值。

可以設定大小，也可以設定百分比（參考物件為容器）。預設值為auto,即子元素width的大小。子元素在同時設定了width和flex-basis時，會以flex-basis的值為寬度和換行標準。當flex-basis的值為auto時，容器的換行和寬度參考標準會變為width的值。

flex-grow

flex-grow: 定義專案的放大比例：各個子元素預設為0；當有剩餘空間時，不進行分配。如果設定個別子元素為1或以上，則該子元素分配完剩餘空間。元素之間還可以通過設定flex-grow的大小來按照比例進行剩餘空間的分配。當沒有剩餘空間且不能換行時，該屬性失效。

flex-shrink

flex-shrink: 定義了專案的縮小比例：各個子元素預設值為1，當空間不足且不能換行時，各個元素會等比例縮小，如果設定個別元素的值為0，則該元素不縮小，其他幾個元素會等比例縮小。如果個別元素設定大於1的數，則按照一定的比例再縮小，其他元素按照比例分配空間。

align-items，子元素為單行或者多行都生效，注意：在多**況下設定屬性，會將空間平分給多行，然後在各行中進行對齊方式。比如現在容器中有兩行子元素，如果設定align-items:center，會將空間平均分給兩行，並且在各行中進行居中對齊。不管容器是否設定固定高度。

align-content：只在多**況下生效，並且需要父容器高度固定且有多餘空間才生效。設定屬性值時都是把容器當成乙個整體來進行排序對齊的。

有乙個特殊情況：即在容器高度固定時，子元素只有一行的情況下，且設定換行flex-wrap：wrap，則align-content屬性也會生效。

flex布局想要控制元素之間的距離時，盡量用margin:auto；不要用具體數字

多個元素時設定"margin"值為"auto"值，自動獲取彈性容器中剩餘的空間。會在父元素中完全居中。

設定display：flex布局布局和文字就不會在縮小視窗時候因為擠壓而換行亂飄動了，因為flex布局預設不換行 flex-wrap：nowrap。

塊元素垂直居中問題可以採用 flex 解決。

而行內元素垂直居中問題解決如下：

1）單行

該元素 css 屬性 line-height 的值與該元素的父級元素 css 屬性 height 一致即可。

2）多行

設定該元素 css 屬性：display: table-cell; vertical-align: middle;，還需設定該元素的父級元素 css 屬性：display: table;。