CSS样式底部平均分布

在网站开发过程中，我们经常需要将一排元素展示在页面底部，比如页脚链接、社交媒体图标等等。而如果我们希望这些元素在底部平均分布，应该怎么做呢？

下面，我们来介绍一种简单易用的CSS样式，可以轻松地实现底部元素平均分布的效果。

使用Flex布局

CSS3引入的弹性盒子布局（Flexbox）为我们提供了更加便捷的布局方式。下面的代码片段展示了如何使用Flexbox实现底部平均分布：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.container > div {
  flex-shrink: 0;
}

通过 display: flex 属性，将容器设置为Flex容器，子元素默认成为Flex项目。而 justify-content: space-between 属性则可以让子元素沿着容器的主轴方向平均分布，同时 align-items: center 属性可以让所有的子元素在次轴方向垂直居中。

值得注意的是，如果我们想让每个子元素的宽度根据内容自适应，需要给子元素添加 flex-shrink: 0 属性，来禁止缩放元素。

水平居中、垂直底部

以上代码片段实现了子元素底部自适应排布，但有不少读者可能还感到不太满足。因为仅仅靠底部排布是无法满足要求的，还需要子元素进行水平居中排布，如何实现呢？

这里我们需要再加入一些属性：

.container {
  position: relative;
}

.container > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  text-align: center;
}

通过给容器设置 position: relative 属性，我们让子元素可以基于相对位置进行定位。接着我们给每个子元素添加 position: absolute 定位，保证每个元素在相同位置上。

通过设置 left: 0 和 right: 0 属性，我们可以让每个元素水平居中排布。而 bottom: 0 属性则可以让每个元素底部自适应排布，text-align: center 属性则可以让每个元素内部的内容居中。

结语

至此，我们已经完成了底部平均分布的效果。在实际开发过程中，这种样式非常的常见，适用于对页面底部有固定的区块需要排布。希望这篇文章对您有所帮助。