前端小案例3：Flex彈性布局行內(nèi)元素寬度自適應(yīng)

項(xiàng)目背景：需要在一行上展示空調(diào)設(shè)備的三個(gè)模式（制冷、制熱、通風(fēng)）或者兩個(gè)模式（制冷、制熱）；因?yàn)椴煌a(chǎn)品的模式數(shù)量不同，因此需要讓模式按鈕的寬度自適應(yīng)，有兩個(gè)模式時(shí)，單個(gè)模式寬度占據(jù)50%；三模式時(shí)，寬度占據(jù)33.3%。

可以使用Grid和Flex 彈性布局實(shí)現(xiàn)。Grid更經(jīng)常被用于復(fù)雜的二維布局，而我們的場(chǎng)景是一維的，因此我們可以使用Flex布局實(shí)現(xiàn)。

下面給出一個(gè)簡(jiǎn)單的demo：

HTML結(jié)構(gòu)：

<div class="container"><span>元素1</span><span>元素2</span><span>元素3</span>
</div>

CSS樣式：

.container {display: flex;justify-content: space-between;
}.container span {flex-grow: 1;/* 可選樣式 *//* 如果要添加間距，可以使用 margin 屬性 *//* margin: 0 5px; */
}

在上述示例中，我們將div容器設(shè)置為display: flex;，這使得其子元素按照一行排列。justify-content: space-between;樣式使得子元素之間均勻分布，并填充整個(gè)div容器的寬度。

flex-grow: 1;是Flexbox布局中的一個(gè)屬性，用于指定彈性元素的增長(zhǎng)因子。它定義了彈性元素在可用空間中分配的比例。

當(dāng)設(shè)置flex-grow: 1;時(shí)，該元素會(huì)根據(jù)可用空間進(jìn)行自動(dòng)調(diào)整寬度，以填充剩余空間。如果有多個(gè)具有相同flex-grow值的元素，它們將平均分配可用空間。

舉個(gè)例子，假設(shè)有一個(gè)div容器，其中包含三個(gè)子元素：

<div class="container"><div class="item">元素1</div><div class="item">元素2</div><div class="item">元素3</div>
</div>

設(shè)置CSS樣式如下：

.container {display: flex;
}.item {flex-grow: 1;
}

在這種情況下，每個(gè)子元素的flex-grow屬性都被設(shè)置為1，它們將平均分配可用的寬度空間。如果容器的寬度為300px，并且沒有其他限制，那么每個(gè)子元素將獲得相等的寬度，即100px。

如果其中一個(gè)子元素的flex-grow屬性設(shè)置為2，而其他子元素仍為1，那么具有flex-grow: 2;的子元素將獲得其他子元素的兩倍的寬度。

總結(jié)來說，flex-grow: 1;表示元素具有相等的增長(zhǎng)因子，它們將根據(jù)可用空間平均分配寬度。如果某個(gè)元素的flex-grow值為2，它將獲得其他元素的兩倍寬度的增量。