CSS SNIPPET

  返回

平均分布子元素  页面布局

在父元素内平均分布排列子元素。

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;
}
效果演示

Item1

Item2

Item3

代码说明
  1. display: flex 启用flexbox布局。
  2. justify-content: space-between 将子元素水平平均分布。第一个子元素定位在左边, 最后一个子元素定位在右边。
  3. 另一种方法是使用justify-content: space-around 使每个子元素在空白中居中,而不是 在子元素之间插入空白。
浏览器支持

100.0%

⚠️ 完整支持需要浏览器前缀。