justify-content 属性详解

在 CSS 中，justify-content 属性用于控制容器内的 flex 项目在主轴上的对齐方式。这个属性非常重要，它可以帮助我们更好地布局和排列 flex 项目，使得页面的布局更具灵活性和美观性。

本文将详细介绍 justify-content 属性的各种取值和使用场景，帮助读者更好地理解和运用该属性。

1. 什么是 justify-content 属性

在介绍 justify-content 属性之前，我们先来回顾一下 flex 布局的基本概念。

Flex 布局是 CSS3 提供的一种强大的布局方式，可以简化网页布局的开发过程。在 Flex 容器中，通过指定 flex 项目的属性来控制它们如何在容器内进行布局。

justify-content 属性是用于控制 flex 项目在主轴上的对齐方式的。它可以让我们在容器内自由地调整 flex 项目的水平布局，使得项目能够按照一定的规则进行排列。

在 CSS 中，我们可以使用以下的代码声明 justify-content 属性：

.container {
  justify-content: <value>;
}

其中，<value> 可以是以下取值之一：

• flex-start：flex 项目在主轴上靠前对齐；
• flex-end：flex 项目在主轴上靠后对齐；
• center：flex 项目在主轴上居中对齐；
• space-between：flex 项目在主轴上平均分布，首个项目放在容器的起始位置，最后一个项目放在容器的末尾位置；
• space-around：flex 项目在主轴上平均分布，项目之间的间隔相等，项目两侧的间隔是其他间隔的两倍；
• space-evenly：flex 项目在主轴上平均分布，项目之间的间隔相等。

接下来，我们将从这六种取值出发，分别详细介绍 justify-content 属性的用法和效果。

2. justify-content: flex-start

justify-content: flex-start 是 justify-content 属性的默认值。它将所有的 flex 项目都靠起始部分对齐。

例如，假设我们有一个容器内有三个 flex 项目的布局，代码如下：

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

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

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

以上代码中的容器 .container 使用了 justify-content: flex-start 属性，其子项目都为宽高都为 100px 的正方形。

运行代码，我们可以看到三个 flex 项目都靠在容器的起始位置，即整个容器的左边缘。

这就是 justify-content: flex-start 的效果。