CSS columns轻松实现两端对齐布局效果

CSS columns轻松实现两端对齐布局效果

兜兜转转一大圈，最后发现实现两端对齐布局方式最简单的居然是使用CSS columns多栏布局。

例如，我们想要实现3列元素两端对齐，中间间隙是30px，CSS代码为：

.container {

   columns: 3;

   column-gap: 30px;

   /* 也可以是gap: 30px */

}

game over~

简单到令人发指。

不要怀疑，看一个实时渲染的例子吧：

<div class="container">

   <div class="zhang"></div>

   <div class="xin"></div>

   <div class="xu"></div>

</div>

.container {

   columns: 3;

   column-gap: 30px;

}

.container > div {

   padding: 50px;

   background: deepskyblue;

}

二、columns实现的优缺点

优点

相比Flex布局和Grid布局的space-between值的两端对齐效果，使用CSS columns布局实现的优点除了代码少了一点之外，最大的优点是保护了HTML元素原本的display计算值。

例如，浏览器默认状态下，<li>元素会出现项目符号，例如圆点，或数字序号。

如果使用Flex布局或Grid布局，就需要设置display:flex或者display:grid，改变了原始的display:list-item计算值，圆点，或数字序号就会消失。

可以看到<li>元素子元素既保持了两端对齐效果，<li>元素自身默认自带的圆点符号也保留了。

缺点

适合单行元素的两端对齐效果，如果列表元素有很多行，则columns布局就不太好处理，一是列表的流向优先垂直方向，二是容易出现列表垂直分列的意外场景。

三、结语

CSS columns实现两端布局效果虽然在实际开发的时候不实用，因为还是有不少限制的。