交叉轴对齐

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

在 CSS 中，align-items 属性用于控制弹性项目沿交叉轴（与主轴相反的轴）的对齐方式。它可以帮助你在行中垂直放置项目，或在列中水平放置项目。这个属性有助于让布局更加灵活、响应更快。

下面是使用 align-items 属性的基本语法：

.container {
    display: flex;
    align-items: value;
}

value：沿交叉轴对齐弹性项目的方式，可以是以下值之一：

stretch：这是默认值。弹性项目会沿交叉轴拉伸以填满容器，同时遵守 min-width/max-width 和 min-height/max-height。

flex-start：弹性项目沿交叉轴起点放置。

flex-end：Flex 项放置在交叉轴的末端。

center：Flex 项目沿交叉轴居中。

baseline：弹性项目会对齐，使它们的基线彼此对齐。

例如：

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

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

挑战

简单

你会得到一个 HTML 文档，其中有两个分区（<div>），每个分区都包含三个子分区。

按照以下步骤操作：

设置 .seas 元素的样式：
- 编写一条 CSS 规则，选择类为 .seas 的 <div> 元素。
- 将 display 设置为 flex，以便灵活地排列子元素。
- 将 align-items 属性设置为 center，使弹性项目在交叉轴中间对齐。
设置 .oceans 元素的样式：
- 编写一条 CSS 规则，选择类为 .oceans 的 <div> 元素。
- 将 display 设置为 flex，以便灵活地排列子元素。
- 将 align-items 属性设置为 flex-end，使弹性项目在交叉轴末端对齐。

亲手试试

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>