在前端开发中，实现多列均匀布局一直是一个让人头疼的问题，特别是需要同时考虑到响应式布局。由于传统的 CSS 布局使用 float 或者 table 会出现问题，因此可以使用 Flexbox 来完成这个任务。
Flexbox 是一种新的 CSS 布局模型，它使得容器中的子元素能够按照各自的大小及设定的比例分配父容器的空间，从而实现更加灵活的布局方式。
创建多列均匀布局
创建多列均匀布局可以使用 flex-direction 属性，它定义了主轴的方向。
.container { display: flex; /* 将容器设置为弹性布局 */ flex-direction: row; /* 将主轴设置为水平方向 */ justify-content: space-between; /* 子元素横向均匀分布 */ }
上面的代码将容器设置为 flex 布局，主轴的方向为水平方向，子元素水平间距均匀。justify-content 属性指定了子元素在主轴上的对齐方式为 space-between，即起始和结束两端子元素与父容器边缘之间的距离相等。
示例代码如下：
<div class="container"> <div class="item">Column 1</div> <div class="item">Column 2</div> <div class="item">Column 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- - ----- - ------ ---- ----------------- ----- -------- ----- ----------- ----------- -展开代码
上面的示例代码中，容器的主轴方向为水平方向，子元素设置宽度为 30%，背景色为灰色，内边距为 10px。
实现响应式布局
使用 Flexbox 实现响应式布局是非常简单的。只需要根据屏幕尺寸的不同，设置不同的样式即可。在以下示例中，我们将在移动端上自动切换到纵向排列。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- -- -- --------- -------- -- --------------- ---- -- ----------- -- ---------------- -------------- - ------ ---- ------ --- ----------- ------ - ---------- - --------------- ------- -- --- ----- ------------ -- ------------ -------- -- ---------- -- - -展开代码
当浏览器宽度小于等于 480px 时，容器的主轴方向改为垂直方向，子元素高度自适应。
完整的代码示例如下：
<div class="container"> <div class="item">Column 1</div> <div class="item">Column 2</div> <div class="item">Column 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- --------------- ---- ---------------- -------------- - ------ ---- ------ --- ----------- ------ - ---------- - --------------- ------- ------------ -------- - - ----- - ------ ---- ----------------- ----- -------- ----- ----------- ----------- -展开代码
结论
Flexbox 可以为我们带来更加灵活和强大的布局方式，在实现多列均匀布局时也可以较容易地进行响应式布局。使用 Flexbox 布局时需要注意的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67556d853af3f99efe4ca0ec
