前言

Flex布局（彈性盒子布局） 是一種用于在容器中進(jìn)行靈活和自適應(yīng)布局的CSS布局模型。通過(guò)使用Flex布局，可以更方便地實(shí)現(xiàn)各種不同尺寸和比例的布局，使元素在容器內(nèi)自動(dòng)調(diào)整空間分配。

目錄

容器屬性

??display屬性

??flex-direction屬性

??flex-wrap屬性

??flex-flow屬性

??justify-content屬性

??align-items屬性

??align-content屬性

項(xiàng)目屬性

??order屬性

??flex-basis屬性

??flex-grow屬性

??flex-shrink屬性

??flex屬性

??align-self屬性

Flex-組成

Flex布局由以下幾個(gè)主要組成部分組成：

1. 容器（Container）：采用Flex布局的父元素即為容器。
2. 項(xiàng)目（Item）：容器內(nèi)的子元素即為Flex項(xiàng)目，也稱(chēng)為Flex項(xiàng)。
3. 主軸（Main Axis）：Flex容器的主要方向被稱(chēng)為主軸。默認(rèn)情況下，主軸的方向是從左到右（水平方向）。
4. 側(cè)軸/交叉軸（Cross Axis）：與主軸垂直的方向被稱(chēng)為側(cè)軸。默認(rèn)情況下，它是從上到下（垂直方向）。

Flex布局的相關(guān)屬性：

容器屬性

??display屬性

在Flex布局中，display屬性用于定義容器元素的布局類(lèi)型。只有在容器元素上設(shè)置display屬性并取值為flex或inline-flex才能啟用flex布局。

• display: flex; ：將容器元素設(shè)置為塊級(jí)的Flex容器，使其內(nèi)部子元素按照Flex布局規(guī)則排列。容器元素將占據(jù)一行，并根據(jù)主軸和側(cè)軸來(lái)對(duì)齊、伸縮和分配空間
• display: inline-flex; ：將容器元素設(shè)置為行內(nèi)的Flex容器，使其內(nèi)部子元素按照Flex布局規(guī)則排列。容器元素將與其他行內(nèi)元素在同一行內(nèi)，并根據(jù)主軸和側(cè)軸來(lái)對(duì)齊、伸縮和分配空間。

示例：

HTML代碼：

<div class="box">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

CSS代碼：

/* Flex容器 */
.box {
    display: flex;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 0 15px;
}

上述代碼中，創(chuàng)建了一個(gè)Flex容器.box，里面包含三個(gè)Flex項(xiàng)目，并設(shè)置了其他屬性方便展示效果。

預(yù)覽：

??flex-direction屬性

flex-direction屬性用于修改Flex容器的主軸方向，若主軸方向修改了，那么側(cè)軸就會(huì)相應(yīng)旋轉(zhuǎn)90度，F(xiàn)lex項(xiàng)目的排列方向就可能會(huì)發(fā)生改變，因?yàn)镕lex項(xiàng)目一般沿主軸方向排列。

flex-direction屬性取值：

• row（默認(rèn)值）：Flex項(xiàng)目水平排列，從左到右。主軸為水平方向。

• row-reverse：Flex項(xiàng)目水平排列，從右到左。主軸為水平方向，但方向與row相反。

• column：Flex項(xiàng)目垂直排列，從上到下。主軸為垂直方向。

• column-reverse：Flex項(xiàng)目垂直排列，從下到上。主軸為垂直方向，但方向與column相反。

示例：

/* Flex容器 */
.box {
    display: flex;
    flex-direction: column;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 50px;
    background-color: orange;
    margin: 5px 0;
}

上述代碼中，將主軸修改為垂直方向。

預(yù)覽：

??flex-wrap屬性

Flex項(xiàng)目會(huì)自動(dòng)擠壓或拉伸，默認(rèn)情況下，所有Flex項(xiàng)目會(huì)在一行顯示。flex-wrap屬性用于控制Flex項(xiàng)目在容器內(nèi)空間不足時(shí)是否換行。

?flex-wrap屬性取值：

• nowrap（默認(rèn)值）：Flex項(xiàng)目不換行，會(huì)盡量在一行內(nèi)排列。
• wrap：Flex項(xiàng)目根據(jù)需要進(jìn)行換行排列，如果項(xiàng)目在一行內(nèi)無(wú)法容納，就會(huì)移到下一行。
• wrap-reverse：與wrap類(lèi)似，但是換行方式相反，從下往上排列。

示例：

在默認(rèn)情況下，設(shè)置5個(gè)項(xiàng)目，將容器和項(xiàng)目的寬度固定，令項(xiàng)目總寬度超過(guò)容器寬度。

HTML代碼：

<div class="box">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
</div>

CSS代碼：

/* Flex容器 */
.box {
    display: flex;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 0 1px;
}

預(yù)覽：

查看項(xiàng)目的實(shí)際尺寸：

可見(jiàn)項(xiàng)目實(shí)際寬度變?yōu)榱?54.4px，項(xiàng)目發(fā)生了收縮。

我們?cè)O(shè)置flex-wrap屬性并取值為wrap：

/* Flex容器 */
.box {
    display: flex;
    flex-wrap: wrap;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 1px 1px;
}

預(yù)覽：

項(xiàng)目超出容器寬度時(shí)發(fā)生了換行。

查看項(xiàng)目實(shí)際尺寸：

?項(xiàng)目的尺寸并沒(méi)有發(fā)生改變。

??flex-flow屬性

flex-flow屬性時(shí)flex-direction和flex-wrap兩個(gè)屬性的縮寫(xiě)，用于同時(shí)設(shè)置Flex容器的主軸方向和換行方式。

語(yǔ)法：

flex-flow: [flex-direction] [flex-wrap];

??justify-content屬性

justify-content屬性用于設(shè)置Flex容器中Flex項(xiàng)目沿主軸方向的對(duì)齊方式。它會(huì)影響項(xiàng)目在容器內(nèi)的水平位置分布。

justify-content屬性取值：

• flex-start：默認(rèn)值，項(xiàng)目靠近容器起始邊界對(duì)齊。
• flex-end：項(xiàng)目靠近容器末尾邊界對(duì)齊。
• center：項(xiàng)目在容器中居中對(duì)齊。
• space-between：項(xiàng)目均勻分布在容器內(nèi)，首個(gè)項(xiàng)目靠近容器起始邊界，最后一個(gè)項(xiàng)目靠近容器末尾邊界，項(xiàng)目之間的間隔相等。
• space-around：項(xiàng)目均勻分布在容器內(nèi)，項(xiàng)目?jī)蓚?cè)的間隔相等，并且項(xiàng)目與容器邊界之間的間隔是項(xiàng)目之間間隔的一半。
• space-evenly：項(xiàng)目均勻分布在容器內(nèi)，包括項(xiàng)目與容器邊界之間的間隔均等。

示例：

/* Flex容器 */
.box {
    display: flex;
    justify-content: space-evenly;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 1px 1px;
}

我設(shè)置了三個(gè)項(xiàng)目，并讓它們沿主軸均勻排列，項(xiàng)目與容器之間間距相等。

預(yù)覽：

通過(guò)調(diào)整justify-content屬性的值，可以實(shí)現(xiàn)不同的項(xiàng)目對(duì)齊效果，使布局更加靈活和多樣化。?

??align-items屬性

align-items屬性用于設(shè)置Flex容器中Flex項(xiàng)目沿側(cè)軸（交叉軸）方向的對(duì)齊方式。它會(huì)影響項(xiàng)目在容器內(nèi)的垂直位置分布。

align-items屬性取值：

• stretch：默認(rèn)值，項(xiàng)目被拉伸以填滿(mǎn)容器的整個(gè)交叉軸空間。

• flex-start：項(xiàng)目靠近交叉軸起始邊界對(duì)齊。

• flex-end：項(xiàng)目靠近交叉軸末尾邊界對(duì)齊。

• ?center：項(xiàng)目在交叉軸中居中對(duì)齊。

• ?baseline：項(xiàng)目基線(xiàn)與容器的基線(xiàn)對(duì)齊。

示例：

/* Flex容器 */
.box {
    display: flex;
    align-items: center;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 1px 1px;
}

?我設(shè)置了三個(gè)項(xiàng)目，它們將在交叉軸中居中對(duì)齊。

預(yù)覽：

??align-content屬性

align-content屬性用于設(shè)置Flex容器中多行項(xiàng)目在交叉軸方向的對(duì)齊方式。它適用于具有多行項(xiàng)目的布局情況，并且只在容器存在多行時(shí)才會(huì)生效。

align-content屬性取值：

• stretch：默認(rèn)值，項(xiàng)目被拉伸以填滿(mǎn)容器的整個(gè)交叉軸空間。
• flex-start：多行項(xiàng)目靠近交叉軸起始邊界對(duì)齊。
• flex-end：多行項(xiàng)目靠近交叉軸末尾邊界對(duì)齊。
• center：多行項(xiàng)目在交叉軸中居中對(duì)齊。
• space-between：多行項(xiàng)目均勻分布在容器內(nèi)，首行項(xiàng)目靠近交叉軸起始邊界，末行項(xiàng)目靠近交叉軸末尾邊界，行之間的間隔相等。
• space-around：多行項(xiàng)目均勻分布在容器內(nèi)，行與行之間以及首行和末行與容器邊界之間的間隔都相等。
• space-evenly：多行項(xiàng)目均勻分布在容器內(nèi)，行之間的間隔和首行與容器起始邊界以及末行與容器末尾邊界之間的間隔均相等。

與align-items屬性不同的是，align-content屬性是以行為單位進(jìn)行對(duì)齊。

示例：

/* Flex容器 */
.box {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    width: 782px;
    height: 400px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin: 1px 1px;
}

為了更好展現(xiàn)效果，我設(shè)置了多個(gè)盒子，并讓它們換行排列，在上述代碼中，多行項(xiàng)目將沿交叉軸均勻分布在容器內(nèi)。

預(yù)覽：

項(xiàng)目屬性

??order屬性

order屬性用于設(shè)置Flex容器內(nèi)項(xiàng)目的排列順序。它可以改變項(xiàng)目的默認(rèn)顯示順序，使其按照指定的順序布局。

默認(rèn)情況下，F(xiàn)lex容器內(nèi)的項(xiàng)目會(huì)按照它們?cè)谠创a中出現(xiàn)的順序布局，即order的默認(rèn)值為0。通過(guò)設(shè)置order屬性，可以改變項(xiàng)目的顯示順序。

order屬性的說(shuō)明：

• order: <integer>：用整數(shù)值表示項(xiàng)目的顯示順序，值越小的項(xiàng)目會(huì)優(yōu)先顯示。默認(rèn)值為0。

示例：

HTML代碼：

<div class="box">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

CSS代碼：

/* Flex容器 */
.box {
    display: flex;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 1px 1px;
}

預(yù)覽：

默認(rèn)情況下，項(xiàng)目按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局。

將第2個(gè)項(xiàng)目的order屬性值設(shè)為1：

.box div:nth-child(2) {
    order: 1;
}

預(yù)覽：

因?yàn)轫?xiàng)目2比其他項(xiàng)目具有更高的order值，所以它將在其他項(xiàng)目之后顯示。

?請(qǐng)注意以下幾點(diǎn)：

• order只影響項(xiàng)目的顯示順序，并不改變布局結(jié)構(gòu)，即實(shí)際的占位位置仍然按照源代碼中的順序。
• order可以接受負(fù)值和小數(shù)值，但大部分情況下使用整數(shù)即可滿(mǎn)足需求。
• 對(duì)于具有相同order值的項(xiàng)目，它們將按照源代碼中的順序來(lái)確定顯示順序。

??flex-basis屬性

flex-basis屬性用于設(shè)置Flex項(xiàng)目的初始主軸尺寸（主軸方向上的寬度或高度）。它確定了在分配多余空間之前，項(xiàng)目占據(jù)的空間大小。

flex-basis屬性取值：

• auto：默認(rèn)值。項(xiàng)目將根據(jù)其內(nèi)容自動(dòng)決定初始尺寸。
• <length>：可以使用具體的長(zhǎng)度值（如像素、百分比等）來(lái)定義項(xiàng)目的初始尺寸。
• content：項(xiàng)目的初始尺寸將根據(jù)內(nèi)容來(lái)決定，適用于項(xiàng)目希望自適應(yīng)內(nèi)容而不指定固定尺寸的情況。

示例：

/* Flex容器 */
.box {
    display: flex;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    flex-basis: 120px;
    background-color: orange;
    margin: 1px 1px;
}

上述代碼中，將項(xiàng)目的初始主軸尺寸（寬度）設(shè)為120px，高度未設(shè)置（默認(rèn)伸展）。

預(yù)覽：

對(duì)于flex-basis屬性值與寬度（或高度） ，width屬性用于設(shè)置元素的具體寬度（直接確定的寬度，不受其他flex屬性影響），其區(qū)別本文不再深究。

??flex-grow屬性

flex-grow屬性用于控制Flex項(xiàng)目在主軸方向上的伸展能力。它接受一個(gè)非負(fù)數(shù)值作為參數(shù)，表示項(xiàng)目在分配多余空間時(shí)所占的比例。

flex-grow屬性取值：

• 0（默認(rèn)值）：項(xiàng)目不進(jìn)行伸展，即使有可用空間。

• ?正數(shù)（大于0）：項(xiàng)目將根據(jù)其值相對(duì)于其他項(xiàng)目進(jìn)行伸展。

元素伸展的計(jì)算方法：

上圖中，容器寬度為200px，容器剩余寬度為50px，按照flex-grow值的比例分配剩余寬度，元素1分配到的寬度=50*3/(3+2)=30px，所以伸展后寬度為80px。

??flex-shrink屬性

flex-shrink屬性用于設(shè)置Flex項(xiàng)目在空間不足時(shí)的收縮能力。它接受一個(gè)非負(fù)數(shù)值作為參數(shù)，表示項(xiàng)目在可用空間不足時(shí)相對(duì)于其他項(xiàng)目收縮的比例。

默認(rèn)情況下，所有項(xiàng)目的flex-shrink值為1，即可以等比例收縮。flex-shrink的值越大，項(xiàng)目收縮時(shí)所占比例越大。如果某個(gè)項(xiàng)目的flex-shrink值為0，則該項(xiàng)目不會(huì)在空間不足時(shí)進(jìn)行收縮，保持其原始大小。

示例：

上圖中，所有項(xiàng)目的flex-shrink值為1，即它們按比例均勻地收縮。

元素收縮的計(jì)算方法：

容器寬度-項(xiàng)目總寬度=-70px，記作容器剩余寬度為-70px，

縮小因子的分母：1*50 + 1*100 + 1*120 = 270?(1為各元素flex-shrink的值)

元素1的縮小因子：1*50/270

元素1的縮小寬度為縮小因子乘于容器剩余寬度：1*50/270 * (-70)

元素1最后則縮小為：50px + (1*50/270 *(-70)) = 37.03px

??flex屬性

flex屬性是一個(gè)復(fù)合屬性，用于設(shè)置FLex項(xiàng)目的三個(gè)相關(guān)屬性：flex-grow、flex-shrink和flex-basis（放大、收縮和初始主軸尺寸）。

語(yǔ)法：

flex: [flex-grow] [flex-shrink] [flex-basis];

??align-self屬性

align-self屬性用于在flex容器中單獨(dú)設(shè)置某個(gè)flex項(xiàng)目的對(duì)齊方式，它可以覆蓋父容器的align-items屬性。

align-self屬性取值：

• auto：默認(rèn)值，繼承父容器的align-items屬性。
• flex-start：項(xiàng)目對(duì)齊在交叉軸的起始位置。
• flex-end：項(xiàng)目對(duì)齊在交叉軸的終點(diǎn)位置。
• center：項(xiàng)目在交叉軸上居中對(duì)齊。
• baseline：項(xiàng)目在交叉軸上以基線(xiàn)對(duì)齊。
• stretch：默認(rèn)值，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，則會(huì)拉伸以填滿(mǎn)容器的高度。

示例：

/* Flex容器 */
.box {
    display: flex;
    align-items: center;
    width: 782px;
    height: 200px;
    border: 1px solid black;
}
/* Flex項(xiàng)目 */
.box div {
    width: 100px;
    height: 50px;
    background-color: orange;
    margin: 1px 1px;
}

.box div:nth-child(1) {
    align-self: flex-start;
}

.box div:nth-child(3) {
    align-self: flex-end;
}

我設(shè)置了5個(gè)項(xiàng)目，項(xiàng)目1將對(duì)齊在交叉軸的初始位置，項(xiàng)目3將對(duì)齊在交叉軸的終點(diǎn)位置，其他項(xiàng)目將對(duì)齊在交叉軸的中點(diǎn)位置。?

預(yù)覽：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-684384.html

到了這里，關(guān)于CSS Flex布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！