前端小案例3：Flex弹性布局行内元素宽度自适应

前端小案例3：Flex弹性布局行内元素宽度自适应

项目背景：需要在一行上展示空调设备的三个模式（制冷、制热、通风）或者两个模式（制冷、制热）；因为不同产品的模式数量不同，因此需要让模式按钮的宽度自适应，有两个模式时，单个模式宽度占据50%；三模式时，宽度占据33.3%。

可以使用Grid和Flex 弹性布局实现。Grid更经常被用于复杂的二维布局，而我们的场景是一维的，因此我们可以使用Flex布局实现。

下面给出一个简单的demo：

HTML结构：

<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容器设置为display: flex;，这使得其子元素按照一行排列。justify-content: space-between;样式使得子元素之间均匀分布，并填充整个div容器的宽度。

flex-grow: 1;是Flexbox布局中的一个属性，用于指定弹性元素的增长因子。它定义了弹性元素在可用空间中分配的比例。

当设置flex-grow: 1;时，该元素会根据可用空间进行自动调整宽度，以填充剩余空间。如果有多个具有相同flex-grow值的元素，它们将平均分配可用空间。

举个例子，假设有一个div容器，其中包含三个子元素：

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

设置CSS样式如下：

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

在这种情况下，每个子元素的flex-grow属性都被设置为1，它们将平均分配可用的宽度空间。如果容器的宽度为300px，并且没有其他限制，那么每个子元素将获得相等的宽度，即100px。

如果其中一个子元素的flex-grow属性设置为2，而其他子元素仍为1，那么具有flex-grow: 2;的子元素将获得其他子元素的两倍的宽度。

总结来说，flex-grow: 1;表示元素具有相等的增长因子，它们将根据可用空间平均分配宽度。如果某个元素的flex-grow值为2，它将获得其他元素的两倍宽度的增量。