CSS justify-content属性

CSS的justify-content属性控制一组元素沿着其包含框沿主轴线的对齐方式。justify-content属性定义了项目在水平方向如何排布。

语法

container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
}

• flex-start：左对齐，项目对齐容器左侧。
• flex-end：右对齐，项目对齐容器右侧。
• center：居中对齐，项目居中对齐。
• space-between：两端对齐，项目首尾两端对齐，且项目之间的间隙相等。
• space-around：每个项目周围都有间隔，所以项目的间距都是平等的。
• space-evenly：每个项目周围和之间都有间隔，这样组中的项目之间的间距恰好相等。
• stretch：项目之间没有空白间隔，项目沿轴线拉伸以填充剩余空间。

示例

以下示例将演示每个值的不同效果。 假设我们有一个包含以下div元素的容器：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

样式：

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

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
}

在这个例子中，容器有space-evenly的对齐方式，当我们改变对齐方式，我们的条目会相应的移动。

以下是一些使用样式的示例：

Flex-start

将项目对齐容器左侧。

.container {
  display: flex;
  justify-content: flex-start;
}

Flex-end

将项目对齐容器右侧。

.container {
  display: flex;
  justify-content: flex-end;
}

Center

将项目居中对齐。

.container {
  display: flex;
  justify-content: center;
}

Space-between

使项目首尾两端对齐，项目之间的间隙相等。

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

Space-around

为每个项目周围添加间隔，这样项目的间距都是平等的。

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

Space-evenly

每个项目周围和之间都有间隔，这样组中的项目之间的间距恰好相等。

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

Stretch

在剩余空间中，项目沿轴线拉伸以填充其剩余空间。

.container {
  display: flex;
  justify-content: stretch;
}

结论

CSS的justify-content属性是非常有用的，可以在组元素排列时做到对齐方式的自由控制，提升站点的可读性和美观效果，同时增加页面的自适应性。