什么是 Flex 布局？

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

在 CSS 中，Flexbox 布局是一种强大的工具，可以高效地对齐容器中的项目并分配空间。使用 Flexbox，你可以控制容器内元素的对齐方式、方向、顺序和大小，创建能够适应不同屏幕尺寸和设备的灵活动态布局。

要使用 Flexbox，你首先需要定义一个弹性容器。方法是将元素的 display 属性设置为 flex 或 inline-flex。创建弹性容器后，它的直接子元素会自动成为弹性项。

创建弹性容器的基本语法如下：

.container {
    display: flex;
}

display: flex;：此声明会将选中的元素变为弹性容器，并将它的直接子元素变为弹性项目。

创建 flex 容器后，你可以使用各种 Flexbox 属性来控制其中 flex 项目的布局。最常用的属性包括：

flex-direction：指定弹性项目的排列方向（row、column、row-reverse、column-reverse）。
justify-content：沿主轴对齐弹性项目（例如，flex-start、flex-end、center、space-between、space-around）。

align-items：沿交叉轴对齐弹性项目（例如，flex-start、flex-end、center、baseline、stretch）。
flex-wrap：控制弹性项目是否换行到多行（wrap、nowrap、wrap-reverse）。
align-content：当交叉轴上有多余空间时对齐弹性行（类似于 justify-content，但适用于多行）。

挑战

简单

你会得到一个 HTML 文档，其中有一个包含三个子级 <div> 的容器 <div>。你的任务是使用 display: flex; 属性，将父级容器变成弹性容器。按照以下步骤操作：

编写一条 CSS 规则，选择类为 container 的 <div> 元素。
将 .container 元素的 display 属性设为 flex。

亲手试试

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>