由於掘金不支援 html 檔案格式，可以轉到我的部落格 flex佈局 手動操作 button 按鈕，更加有感覺。
一、傳統佈局（盒模型）
display + float + position, 佈局不夠靈活
<div class="inline tradition">
<div></div>
</div>
複製程式碼.tradition {
margin: .5rem auto;
margin-right: .3rem;
width: 8rem;
height: 5rem;
background: #ccc;
position: relative;
}
.tradition div {
position: absolute;
left: 50%;
top: 50%;
margin-left: -1rem;
margin-top: -1rem;
width: 2rem;
height: 2rem;
background: darkorange;
}
複製程式碼
二、彈性盒模型
<div class=" flexbox">
<div></div>
</div>
複製程式碼.flexbox {
width: 8rem;
height: 5rem;
background: #ccc;
display: flex;
}
.flexbox div {
width: 2rem;
height: 2rem;
background: blue;
margin: auto;
}
複製程式碼
三、容器與專案
容器 預設存在兩根軸：
- 水平的主軸（main axis）: 主軸的開始位置（與邊框的交叉點）叫做 main start，結束位置叫做 main end；
- 垂直的交叉軸（cross axis）:交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。
專案 預設沿主軸排列
- 單個專案佔據的主軸空間叫做 main size，
- 佔據的交叉軸空間叫做 cross size。
四、容器的屬性
新建一個容器，三個專案
<div class="bg container">
<div class=" item item1">1</div>
<div class=" item item2">2</div>
<div class=" item item3">3</div>
</div>
複製程式碼.bg {
background: #ccc;
width: 10rem;
height: 7rem;
margin: .3rem;
}
.container {
display: flex;
}
.item {
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
font-size: 1rem;
}
.item1 {
background: #f55;
}
.item2 {
background: darkorange;
}
.item3 {
background: #0f0;
}
複製程式碼1、 flex-direction ( 改變主軸的方向 )
2、 justify-content ( 改變專案在主軸方向的排列方式 )
3、 align-items ( 專案在側軸方向上的排列方式 )
4、 flex-wrap ( 專案在一條軸線上排列不下 是否換行 )
5、 flex-flow ( 複合flex-direction 與flex-wrap )
五、專案的屬性
1、 order ( 專案的排列順序 值小的在前 )
2、 flex-grow ( 子項分配容器剩餘空間的比例 )
預設為0：即容器有剩餘空間，子項也不佔用 容器存在剩餘空間
子項如何分配: 通過給需要擴張的子項設定flex-grow屬性，該屬性的值被稱為權重（無單位），即容器剩餘空間將按照這個權重來分配
flex-grow 的計算: 比如剩餘空間為 x，三個元素的 flex-grow 分別為 a，b，c。設 sum 為 a + b + c。那麼三個元素將得到剩餘空間分別是 x * a / sum, x * b / sum, x * c / sum
3、 flex-shrink ( 容器的空間不夠時，讓各個專案收縮以適應有限的空間)
預設值為1
容器的寬度為900px
父元素 800px
三個子元素分別設定為 200px，300px，400px
三個子元素的 flex-shrink 的值分別為 1，2，3
首先，計運算元元素溢位多少：200 + 300 + 400 - 800 = -100px
那這-100px 將由三個元素的分別收縮一定的量來彌補
具體的計算方式為：每個元素收縮的權重為其 flex-shrink 乘以其寬度。
所以總權重為 1 * 200 + 2 * 300 + 3 * 400 = 2000
三個元素分別收縮：
-100(溢位)* 1(flex-shrink) * 200(width) / 2000 = -10
-100(溢位) * 2(flex-shrink) * 300(width) / 2000 = -30
-100(溢位) * 3(flex-shrink) * 400(width) / 2000 = -60
三個元素的最終寬度分別為：
200 - 10 = 190
300 - 30 = 270
400 - 60 = 340
4、 flex-basis ( 就是width的替代品 優先順序比width高)
5、 align-self(允許單個專案與其他專案不一樣的對齊方式)
可以覆蓋容器設定的align-items屬性
6、 flex屬性
flex-grow flex-shrink flex-basis屬性的複合,後面兩個可以省略
應該是子項中最好用的屬性了