Flexbox 是一种强大的 CSS 布局模型，可以让我们更加轻松地实现复杂的页面布局。在本篇文章中，我们将介绍如何使用 Flexbox 创建一个等宽的多列列表，使得每一列的宽度相同，排版整齐，易于阅读和查找。
等宽多列列表的实现方式
在传统的 CSS 中，如果想要创建等宽的多列列表，我们需要手动计算每一列的宽度，然后进行精确的控制。这种方法非常繁琐，而且在内容改变、屏幕尺寸变化等情况下，需要重新计算和修改样式，非常不灵活。
而使用 Flexbox，我们可以通过设置容器的属性来实现等宽的多列列表，代码更加简洁，而且能够自适应不同情况的变化。
实现等宽多列列表的关键属性
下面我们来看一下如何使用 Flexbox 来实现等宽多列列表。Flexbox 通过三个关键属性实现等宽布局，分别是 display: flex;、flex-wrap: wrap; 和 flex: 1; 。
display: flex
display: flex; 是设置 Flexbox 的关键属性，它告诉浏览器将容器内的子元素变为 Flex 元素。
.container {
display: flex;
}flex-wrap: wrap
flex-wrap: wrap; 是设置 Flexbox 是否换行的属性，当子元素的宽度超过容器宽度时，如果不设置 wrap 属性，子元素将会溢出容器；而设置了 wrap 属性，子元素将会自动折行。
.container {
display: flex;
flex-wrap: wrap;
}flex: 1
flex: 1; 是设置 Flexbox 子元素的宽度比例的属性，其中 1 表示相同的比例。在等宽多列列表中，将子元素的 flex 属性设置为相同的值，在容器内平均分配宽度。
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}等宽多列列表的完整代码
现在，我们将以上三个关键属性合并到一起，实现一个简单的等宽多列列表。
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- -- ------- ------ ----------------- -------- ------- ----- -
等宽多列列表的灵活性
等宽多列列表不仅仅是简单的展示多个列表项，还可以应用到其他场景中，比如图片列表、菜单导航、商品展示等等，具有很高的灵活性。
总结
本文介绍了如何使用 Flexbox 创建等宽的多列列表。通过 display: flex;、flex-wrap: wrap; 和 flex: 1; 这三个关键属性，我们可以轻松实现等宽布局。在实际开发中，不仅可以应用到列表布局，也可以应用到其他复杂的页面布局中，提高开发效率并保证页面的美观程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65923799eb4cecbf2d7177a1