在前端开发中，垂直间距不均匀是一种很常见的问题。无论是网页布局还是移动端布局，都常常会遇到这样的情况，例如一排图标，它们的大小不一、文字长度不一，由此导致它们之间的垂直间距不均匀。而使用传统的 margin-top 与 padding-top 的方式去调整间距，则会存在固定间距无法自动适应和变化的问题，这是一个繁琐且不智能的方式。
这时候，Flexbox 布局就是一个解决垂直间距不均匀问题的好办法。
简介
Flexbox 布局是 CSS3 引入的新布局方式，其本质是一种弹性盒子布局，具有更高的智能度和响应性，能够快速地解决布局中的多种问题。通过将父元素设置为一个 flex 容器，其子元素会自动调整宽度、高度和位置，把父容器内的所有子元素都挤在一排。
实例
以下是一个简单的示例，用 Flexbox 布局实现一排大小不一、间距不均匀的图标：
---- ------------------
---- -------------
---- -----------------
----------
------
---- -------------
---- -----------------
----------
------
---- -------------
---- -----------------
----------
------
---------------- - -------- ----- ---------------- -------------- ------------ ------- - ----- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- -
上面代码中，display: flex; 把父容器变成了 Flex 容器，justify-content: space-between; 设置了子元素间的间距为均匀分配。
而对于每个子元素设置 display: flex;，则将它们也变成了 Flex 容器，然后使用 flex-direction: column; 把子元素变为纵向排列，justify-content: center; 和 align-items: center;，则把子元素垂直和水平都居中了。
通过这样简单的设置，我们就成功地创建出了一排大小不一、间距不均匀的图标。
总结
Flexbox 布局不仅可以解决垂直间距不均匀的问题，它还能解决很多其他的布局问题，例如对于多列文本等解决起来也非常方便。若你是前端开发者的话，就应该好好学习和掌握 Flexbox 布局，这会对你构建更好的网页布局有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6545ae157d4982a6ebf4c6de