在前端开发中，经常需要展示一些数据列表。而将这些列表放在表格、卡片或者其他容器中，都不够优雅和简洁。这时候，我们可以考虑将列表封装到列中，以便更好地展示数据。
为什么要将列表封装到列中？
更好的可读性
将列表封装到列中，能够使页面更整洁、更有条理。每个列表项都能够在单独的列中展示，使用户更容易阅读和理解内容。
更好的响应式布局
随着移动设备的普及，响应式布局变得越来越重要。将列表封装到列中可以使我们更精确地控制每个列表项的宽度和高度，从而更好地适应不同屏幕大小的设备。
更方便的样式设计
将列表封装到列中，也能够更方便地进行样式设计。我们可以通过为每个列设置背景色、边框等样式，让页面更美观和易于识别。
如何将列表封装到列中？
使用 Flex 布局
Flex 布局是一种非常流行的响应式布局方式，也是将列表封装到列中的常用方式。
-- -------------------- ---- -------
---- ----------------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
------.wrapper {
display: flex;
}
.column {
flex: 1;
}在上面的示例代码中，我们使用了 Flex 布局将列表封装到三个列中。.wrapper 是一个父容器，使用 display: flex; 将内部的 .column 元素设置为 flex 子元素。每个 .column 元素都用 flex: 1; 设置了相等的宽度。
使用 Grid 布局
Grid 布局是另一种常用的响应式布局方式，也可以用于将列表封装到列中。
-- -------------------- ---- -------
---- ----------------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
---- ---------------
----
-------- ---- ------
-------- ---- ------
-------- ---- ------
-----
------
------.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}在上面的示例代码中，我们使用了 Grid 布局将列表封装到三个列中。.wrapper 是一个父容器，使用 display: grid; 将内部的 .column 元素设置为 grid 子元素。通过 grid-template-columns: repeat(3, 1fr); 设置了三栏等宽。
总结
将列表封装到列中可以带来更好的可读性、更好的响应
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15007