发布于 3年前

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 给子元素们分配空间,而不是在他们之间。

©2020 edoou.com   京ICP备16001874号-3