Flexbox 布局解决垂直间距不均匀问题

在前端开发中，垂直间距不均匀是一种很常见的问题。无论是网页布局还是移动端布局，都常常会遇到这样的情况，例如一排图标，它们的大小不一、文字长度不一，由此导致它们之间的垂直间距不均匀。而使用传统的 margin-top 与 padding-top 的方式去调整间距，则会存在固定间距无法自动适应和变化的问题，这是一个繁琐且不智能的方式。

这时候，Flexbox 布局就是一个解决垂直间距不均匀问题的好办法。

简介

Flexbox 布局是 CSS3 引入的新布局方式，其本质是一种弹性盒子布局，具有更高的智能度和响应性，能够快速地解决布局中的多种问题。通过将父元素设置为一个 flex 容器，其子元素会自动调整宽度、高度和位置，把父容器内的所有子元素都挤在一排。

实例

以下是一个简单的示例，用 Flexbox 布局实现一排大小不一、间距不均匀的图标：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item">
    <img src="icon1.png"/>
    <p>图标1</p>
  </div>
  <div class="item">
    <img src="icon2.png"/>
    <p>图标2</p>
  </div>
  <div class="item">
    <img src="icon3.png"/>
    <p>图标3</p>
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

上面代码中，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