flexbox

通過給父級添加display: flex; 使父級變成一個彈性盒模型，以此來影響后代元素(不會影響自身)

設定過彈性盒模型的父級，其子代一般不會超出父元素的內部范圍，除非被內容撐開子元素的寬高，導致無法改變子元素的大小時會超出，（注意：一串數字或一串字母寫在一起會被瀏覽器默認為一個字符，不會默認換行）

默認子元素同排顯示（按主軸方向排布），當父級寬度有剩余時，子代正常顯示，當子代寬度超過父級時，等寬度比去分配子代寬度

默認子代高度100%寬度為零，與倒置的標準檔案流極度相似，類似寬高對調

一、因為子元素時按照主軸方向排列的，所以我們需要改變主軸方向來改變排列方式

flex-direction(主軸方向):

1. row(默認值)：主軸橫向，從左向右

2. row-reverse：主軸橫向，從右向左

3. column：主軸縱向，自上向下（變的和標準檔案流一樣默認width:100%）

4. column-reverse：主軸縱向，自下向上（變的和標準檔案流一樣默認width:100%）

二、因為子元素在彈性盒模型里默認不換行，需要設定 flex-wrap 來使它換行

flex-wrap：

1.wrap：換行，雖然換行但是會在評分父級高度處換行（flexbox中處處可見均分），且如果子元素的總寬度大于父元素，超出的子元素將到下一行顯示，子元素寬度不會重置，如果子元素的總高度大于父元素，則元素會超出父元素邊界

三、在主軸的排列方向 justify-content 主軸起點為mian start，終點為mian end

在不動主軸的情況下justify-content：

1. flex-end：右對齊

3. center：居中

4. space-between：兩端對齊，子元素之間間隔相等 元素之間的間距=(父元素的寬度-子元素寬度之和)/(子元素個數-1)

四、交叉軸的排列方向 align-items

align-items：除1外其他的都會破壞默認高度100%

1. stretch(默認值)：如果專案未設定高度或者設成auto，將占滿整個容器的高度

五、交叉軸排列方向2 align-content 可以很好的解決二中的問題

align-content：

stretch(默認值)：各行將會伸展以占用剩余的空間，如果剩余的空間是負數，該值等效于'flex-start'，在其它情況下，剩余空間被所有行平分，以擴大它們的高度尺寸，
center：元素位于容器的中心，各行向彈性盒容器的中間位置堆疊，各行兩兩緊靠住同時在彈性盒容器中居中對齊
flex-start：元素位于容器的開頭
space-between：各行在彈性盒容器中平均分布(主要表現在寬)，未設定高度的會自動變成該行最高的子代的高度
space-around：各行在彈性盒容器中平均分布(主要表現在高)，兩端保留子元素與子元素之間間距大小的一半
flex-end：元素位于容器的底部

六、彈性增長因子（必須是父級寬度有剩余時才有效，否則沒法增長）

flex-grow （彈性增長因子）：number（填數字）；/定義專案的放大比例（默認為0）即如果存在剩余空間，也不放大/

該CSS屬性設定子元素在彈性容器的具有剩余空間是應該如何分配給元素，flex-grow剩余空間是flex容器的大小減去所有lex專案的大小，如果所有兄弟專案具有相同的彈性增長因子，則所有專案將獲得相同的剩余空間份額，否則將根據不同彈性增長因子定義的比率進行分配，

七、彈性縮小因子（解決子元素總寬大于父級時，如何縮小的問題）

flex-shrink （彈性縮放因子）：number； /定義專案的縮小比例，即如果空間不足，該專案將縮小（默認為1）；/

彈性增長因子:當父級元素的寬大于子元素的寬和時，可以利用彈性增長因子.
（無負值）把父元素剩余的空間合理應用,按彈性增長因子的比例給子元素加寬
彈性縮小因子:當父級元素的寬小于子元素的寬和時，可以利用彈性縮小因子.
（無負值）把子元素溢位的空間合理應用，按彈性縮小因子的比例給子元素減寬

八、flex屬性（復合寫法）

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為 0 1 auto，后兩個屬性可選

flex: flex-grow flex-shrink flex-basis（初始寬度）;

1. auto 計算值為 1 1 auto

2. initial: 計算值為 0 1 auto

3. none：計算值為 0 0 auto

4. inherit：從父元素繼承

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值，方便不用計算

九、order屬性：整數值；

屬性定義子元素的排列順序，數值越小越靠前，默認為0，可負數

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/51681.html

標籤：Html/Css