CSS基礎：Flex基本屬性

這篇文章我寫的很糾結，因為flex布局作為“新”特性，寫它的文章沒有1w篇也有9999篇了，所以盡量為代碼添加實體將flex布局介紹給大家，希望幫助大家和自己提高

布局，一個很泛的詞，在CSS早期，很多經典的布局都是依靠position+float+display屬性，組合使用時稍有不慎就會導致棘手的問題，

于是Flex誕生了，flex容器的主要特征是能夠修改其子項的寬度或高度，以在不同的螢屏尺寸上以最佳方式填充可用空間，

篇幅較長，點個收藏慢慢看？

在這里插入圖片描述

一、Flex是什么？

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，

**注意：**這是您需要在父容器上設定的唯一屬性，它的所有直接子容器將自動變為flex專案，

.box{
    display: flex;
    display: -webkit-flex; /* 如果 Webkit 內核瀏覽器 */
    display: inline-flex; /* 如果 你希望它是行內元素 */
}

二、Flex的基礎概念

有多種方法可以對彈性盒子的屬性進行分組介紹，在我看到的幾篇文章中，均是將它們分為兩組，一組用于Flex 容器，另一組用于Flex 專案，

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"，
它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱"專案"，

容器默認存在兩根軸：

水平的主軸（main axis）
- 主軸的開始位置叫做main-start;
- 結束位置叫做main-end;
垂直的交叉軸（cross axis）
- 交叉軸的開始位置叫做cross-start;
- 結束位置叫做cross-end;

在這里插入圖片描述

三、容器的屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

準備作業，看看我們的基礎代碼

我們給box添加flex屬性
模擬一下上一小結的 main-axis和cross-axis
給box添加寬高，防止布局時導致的box自適應，
固定“專案”的樣式

<style>
.box {
    position: relative;
    display: flex;
    margin-top: 100px;
    margin-left: 50%;
    border: 1px solid black;
    width: 500px;
    height: 300px;
    transform: translateX(-50%);
}
.box::after{
    /* 我是主橫軸 */
    position: absolute;
    z-index: -1;
    top: 60px;
    right: 0;
    content: '';
    border-bottom: 1px dashed red;
    height: 0;
    width: 100%;
}
.box::before{
    /* 我是主橫軸 */
    position: absolute;
    z-index: 0;
    top: 0;
    right: 60px;
    content: '';
    border-right: 1px dashed blue;
    height: 100%;
    width: 0;
}
.item {
    margin: 10px;
    width: 80px;
    height: 80px;
    color: #fff;
    text-align: center;
    line-height: 80px;
}
</style>
<div class="box">
    <div class="item" style="background: rgb(175, 112, 112);">1</div>
    <div class="item" style="background: rgb(160, 184, 95);">2</div>
    <div class="item" style="background: rgb(68, 131, 63);">3</div>
</div>

在這里插入圖片描述

在這之后我們可以一一驗證容器的屬性啦～

3.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即專案的main-axis方向），

取值：

row（默認值）：主軸為水平方向，起點在左端，
row-reverse：主軸為水平方向，起點在右端，
column：主軸為垂直方向，起點在上沿，
column-reverse：主軸為垂直方向，起點在下沿，

示例：

給box容器添加屬性：

css	解釋	效果
`flex-direction: row;`	默認值-主軸為水平方向，起點在左端
`flex-direction: row-reverse;`	主軸為水平方向，起點在右端
`flex-direction: column;`	主軸為垂直方向，起點在上沿
`flex-direction: column-reverse;`	主軸為垂直方向，起點在下沿

3.2 flex-wrap屬性

最初的flexbox概念是在一行中設定其專案的容器，該flex-wrap屬性控制flex容器是以單行還是多行布置其專案，以及新行的堆疊方向，

取值：

nowrap（默認值）：專案顯示在一行中，默認情況下會縮小它們以適應Flex容器的寬度;
wrap：如果需要，從左到右和從上到下，彈性專案將顯示在多行中;
wrap-reverse：如果需要，從左到右和從下到上，彈性專案將顯示在多行中;

示例：

給box容器添加屬性（注意我本小節剔除了box內的height屬性）：

css	解釋	效果
`flex-wrap: nowrap;`	專案顯示在一行中，并自適應寬度
`flex-wrap: wrap`	從左到右和從上到下，彈性專案將顯示在多行中
`flex-wrap: nowrap`	從左到右和從下到上，彈性專案將顯示在多行中

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap，

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content屬性

使flex專案沿著flex容器當前行的主軸對齊，當一行上的所有伸縮專案都不靈活或已達到最大大小時，它有助于分配剩余的可用空間，

取值：

下面假設主軸為從左到右，

flex-start（默認值）：左對齊；
flex-end：右對齊；
center：居中；
space-between：兩端對齊，專案之間的間隔都相等；
space-around：每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍；

示例：

css	解釋	效果
`justify-content: flex-start;`	左對齊
`justify-content: flex-end;`	右對齊（注意和row-reverse的區別）
`justify-content: center`	居中
`justify-content: space-between`	兩端對齊，專案之間的間隔都相等；
`justify-content: space-around`	每個專案兩側的間隔相等,專案中間的間距 = 2 * 左右邊緣的間距

注意

如果主軸為縱向軸，那么對應的表現也會改變

3.5 align-items屬性

align-items屬性定義專案在交叉軸上如何對齊，

取值：

下面假設交叉軸從上到下，

stretch（默認值）：如果專案未設定高度或設為auto，將占滿整個容器的高度，
flex-start：交叉軸的起點對齊，
flex-end：交叉軸的終點對齊，
center：交叉軸的中點對齊，
baseline: 專案的第一行文字的基線對齊，

示例：

為了方便觀察效果，我們給專案1-5不同的高度

css	解釋	效果
`align-items: stretch;`	如果專案未設定高度或設為auto，將占滿整個容器的高度
`align-items: flex-start;`	交叉軸的起點對齊
`align-items: flex-end`	交叉軸的終點對齊
`align-items: center`	交叉軸的中點對齊
`align-items: baseline`	專案的第一行文字的基線對齊

3.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用，

當存在多個軸時，此屬性會在Flex容器內將Flex容器的軸線以接近justify-content的方式對齊，

取值：

flex-start：與交叉軸的起點對齊，
flex-end：與交叉軸的終點對齊，
center：與交叉軸的中點對齊，
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布，
space-around：每根軸線兩側的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍，
stretch（默認值）：軸線占滿整個交叉軸，

四、專案的屬性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order

order屬性定義專案的排列順序，數值越小，排列越靠前，默認為0，

css	解釋	效果
專案1: { order: 1 } 專案2: { order: 2 } 專案3: { order: 3 }	數值越小，排列越靠前
專案1: { order: 3 } 專案2: { order: 1 } 專案3: { order: 2 }	數值越小，排列越靠前

css

解釋

效果

專案1: { order: 1 }

專案2: { order: 2 }

專案3: { order: 3 }

數值越小，排列越靠前

專案1: { order: 3 }

專案2: { order: 1 }

專案3: { order: 2 }

數值越小，排列越靠前

4.2 flex-grow

此屬性指定的縮放，該屬性確定當分配正的自由空間時，縮放專案相對于容器中其余其余專案將增長多少，

注意：flex-grow：默認為0，即如果存在剩余空間，也不放大，

話不多說直接上對比圖：

css	解釋	效果
專案1: { flex-grow: 0 } 專案2: { flex-grow: 0 } 專案3: { flex-grow: 0 }	默認為0，即如果存在剩余空間，也不放大，
專案1: { flex-grow: 2 } 專案2: { flex-grow: 0 } 專案3: { flex-grow: 2 }	專案1和3平分剩余寬度
專案1: { flex-grow: 1 } 專案2: { flex-grow: 2 } 專案3: { flex-grow: 1 }	專案2分到的寬度是專案1和3的2倍

css

解釋

效果

專案1: { flex-grow: 0 }

專案2: { flex-grow: 0 }

專案3: { flex-grow: 0 }

默認為0，即如果存在剩余空間，也不放大，

專案1: { flex-grow: 2 }

專案2: { flex-grow: 0 }

專案3: { flex-grow: 2 }

專案1和3平分剩余寬度

專案1: { flex-grow: 1 }

專案2: { flex-grow: 2 }

專案3: { flex-grow: 1 }

專案2分到的寬度是專案1和3的2倍

4.3 flex-shrink屬性

flex-shrink的引數指定彈性收縮因子，該因子確定在分配負的自由空間時，彈性專案相對于彈性容器中其余彈性專案將收縮多少，

css	解釋	效果
所有專案無flex-shrink	默認為1，即如果空間不足，該專案將縮小
專案1: { flex-shrink: 0 } 專案2-6: { flex-shrink: 1 }	如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小，
專案1: { flex-shrink: 3 } 專案2: { flex-shrink: 2 } 專案3-6: { flex-shrink: 1 }	專案1得到的負空間是3/3+2+1*4，專案2類比

css

解釋

效果

所有專案無flex-shrink

默認為1，即如果空間不足，該專案將縮小