CSS 布局 均匀分布的子元素

在父元素中均匀分布子元素。

HTML

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

CSS

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

说明

• display: flex 启用弹性箱。
• justify-content: space-between 水平均匀分布子元素。第一个项目位于左边缘，而最后一个项目位于右边缘。

或者，使用justify-content: space-around 给子元素们分配空间，而不是在他们之间。