HTML | DOM 样式 justifyContent 属性

简介

justifyContent 属性用于设置 flex 容器中子元素在主轴方向上的对齐方式。此属性仅在 CSS3 flexbox 布局中生效。

该属性对应于 justify-content CSS属性。

可选值

以下是可能的 justifyContent 属性值：

• flex-start：子元素在容器的左侧（对于 LTR 语言），并沿主轴方向开始排列。
• flex-end：子元素在容器的右侧（对于 LTR 语言），并沿主轴方向结束排列。
• center：子元素沿主轴居中排列。
• space-between：元素沿主轴方向平均分布，首个子元素与容器起始边缘对齐，末尾子元素与容器结束边缘对齐，子元素之间的间隔相等。
• space-around：元素沿主轴方向平均分布，元素之间的间隔相等，同时子元素两侧还有额外的间隔，与容器起始和结束边缘的间隔相等。

示例

以下代码显示如何使用 justifyContent 属性。

HTML 代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
}

以上 CSS 代码将容器设置为 flex 容器，并使用 justify-content: space-between 属性使 item 元素沿主轴方向平均分布，并将首个子元素与容器起始边缘对齐，末尾子元素与容器结束边缘对齐。

结论

justifyContent 属性是一种使用 flexbox 布局时控制子元素在主轴方向上对齐的非常方便的方法。它允许开发者以多种方式定义容器中子元素之间的空间和对齐。