主轴对齐

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 46 课，共 76 课。

在 CSS 中，justify-content 属性用于控制弹性容器中的弹性项目沿主轴的间距。容器中有剩余空间时，它可以帮助对齐项目并分配多余空间。这个属性有助于水平（行方向）或垂直（列方向）放置项目，让布局更加灵活，并能更好地适应不同尺寸。

下面是使用 justify-content 属性的基本语法：

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

value：flex 项目沿主轴的对齐方式，可以是以下值之一：

flex-start：这是默认值。项目会向行的起始位置排列。

flex-end：项目会向行的末尾排列。

center：项目沿着主轴居中。

space-between：项目沿着线均匀分布，第一个项目位于起点，最后一个项目位于终点。

space-around：项目沿着主轴均匀分布，每个项目周围的间距相等。

space-evenly：项目之间以及项目与边缘之间的间距都相等。

例如：

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

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

在这个示例中，.container-start 元素会将其弹性项目沿主轴起点对齐，.container-center 元素会将其弹性项目沿主轴居中对齐。

挑战

简单

给你一个 HTML 文档，其中有两个包含三个子 <div> 的 <div> 容器。父容器已通过 display: flex; 设置为弹性容器。你的任务是使用 justify-content 属性沿主轴对齐弹性项目。按以下步骤操作：

编写一条 CSS 规则，选择 class 为 fruits 的 <div> 元素。
将 .fruits 元素的 justify-content 属性设为 center，使弹性项目沿主轴居中。
编写一条 CSS 规则，选择 class 为 vegetables 的 <div> 元素。
将 .vegetables 元素的 justify-content 属性设为 space-between，使弹性项目沿主轴分布。

亲手试试

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>