通过使用 CSS Flexbox（弹性盒子模型），我们可以快速、简单地实现多列自适应布局，特别对于经常需要在不同设备上适应不同屏幕大小的网站或应用程序而言，这种布局方式尤其适用。CSS Flexbox 布局还可以轻松的实现页面的垂直和水平居中，水平和垂直布局的对齐等操作。
理解 CSS Flexbox
在我们深入了解如何使用 CSS Flexbox 布局实现多列自适应布局之前，我们需要先理解 CSS Flexbox 看起来如何以及它是如何运作的。
Flexbox 是一种相对于传统布局模型无需依赖浮动和定位即可完全控制布局方向、对齐、大小等操作的布局方式。使用 Flexbox 布局时，我们可以将父元素定义为 Flex 容器，并定义其子元素为 Flex 项目。Flex 项目将根据包含它们的容器自动调整其大小和位置。定义 Flex 容器的样式会影响到其子元素的布局方式。
我们使用 CSS 属性 display: flex; 或 display: inline-flex; 来将一个元素定义为 Flex 容器。默认情况下，Flex 容器的方向为行（从左到右）方向。
以下是定义 Flexbox 容器和其子元素的样例代码：
<div class="flex-container"> <div class="flex-item">Flex 项目 1</div> <div class="flex-item">Flex 项目 2</div> <div class="flex-item">Flex 项目 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- --------------- ---- - ---------- - ------ ------ ------- ------ ----------------- ----- ------- ----- -
上述样例代码中，我们定义了一个包含三个 Flex 项目的 Flex 容器。三个 Flex 项目都具有相同的宽度、高度和边距。我们在 Flex 容器上设置了 display: flex; 属性，从而将其定义为 Flex 容器。
实现多列自适应布局
进入正题，我们尝试使用 CSS Flexbox 布局实现多列自适应布局。我们将为您提供一个四列布局的实例，该实例中每一列都有不同的高度和宽度。
该示例代码如下：
<div class="flex-container"> <div class="flex-item item1">Flex 项目 1</div> <div class="flex-item item2">Flex 项目 2</div> <div class="flex-item item3">Flex 项目 3</div> <div class="flex-item item4">Flex 项目 4</div> </div>
使用下面的 CSS 样式：
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- - ---------- - ----- - - ---- ------- ------ - ------ - ----------------- ----- ------- ------ - ------ - ----------------- ----- ------- ------ - ------ - ----------------- ----- ------- ------ - ------ - ----------------- ----- ------- ------ -
上述 CSS 样式中，我们使用了 flex-wrap: wrap; 属性来使 Flex 项目进行自动换行。设置 .flex-item 类的 flex 属性会使得四个项目在行内占据相等的空间。
通过修改 flex 属性，可以调整不同列的大小。上面示例代码中的 flex: 1 0 25%; 用于表示每列的伸展比例、缩小比例和初始大小。设置伸展比例为 1 代表该列可以进行伸展，设置缩小比例为 0 表示在剩余空间不足时，该列不会被缩小。而 25% 表示每一行所占据的空间比例为 25%。因此，四列将按照相等的比例进行伸展。
结论
使用 CSS Flexbox 布局可以为您带来快速、简单，且有力的方法来实现多列自适应布局。通过设置 Flexbox 容器和项目的样式，我们可以掌控其如何展示元素，并调整其大小和位置。希望上述示例能帮助您初步掌握如何使用 CSS Flexbox 实现多列自适应布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770bfa8e9a7045d0d80a7c6