CSS columns实现两端对齐布局代码示例

本篇文章小编给大家分享一下CSS columns实现两端对齐布局代码示例，代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、兜兜转转一大圈

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

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

css;">.container {
    columns: 3 30px;
}

叮咚，结束了，game over~

简单到令人发指。

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

.container {
    columns: 3 30px;
}
.container > div {
    padding: 50px;
    background: deepskyblue;
}

实时渲染效果如下

二、columns实现的优缺点

优点

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

例如，浏览器默认状态下，