一文讀懂 flex, 媽媽再也不用擔心我的佈局了

由於掘金不支援 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屬性的複合,後面兩個可以省略

應該是子項中最好用的屬性了