Flex 方向

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

在 CSS 中，flex-direction 属性控制弹性容器内项目的排列方向。它决定项目按行还是按列排列。

这也会影响 justify-content 和 align-items 等属性的工作方式。正确使用 flex-direction 有助于构建灵活且响应式的布局。

以下是使用 flex-direction 属性的基本语法：

.container {
    display: flex;
    flex-direction: value;
}

value：flex 项目所需的方向，可以是以下值之一：

row：这是默认值。Flex 项目从左到右排列。主轴为水平方向，交叉轴为垂直方向。

row-reverse：弹性项目按行从右向左排列。主轴为水平方向，交叉轴为垂直方向。

column：弹性项目按列从上到下排列。主轴是垂直方向，交叉轴是水平方向。

column-reverse：Flex 项目按列从底部到顶部排列。主轴为垂直方向，交叉轴为水平方向。

例如：

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

在这个示例中，.container-row 元素会让其弹性项目从左向右排列成一行，而 .container-row-reverse 元素会让它们从右向左排列。

挑战

简单

给你一个 HTML 文档，其中有两个父级 <div> 元素，每个元素都包含三个子级 <div> 元素。父级 <div> 元素已通过 display: flex; 设置为弹性容器。你的任务是使用 flex-direction 属性来更改弹性项目的排列方式。

按照以下步骤操作：

编写一条 CSS 规则，选择类名为 container1 的 <div> 元素。
- 将其 flex-direction 属性设为 column，使弹性项目垂直排列成一列。
编写一条 CSS 规则，选择类名为 container2 的 <div> 元素。
- 将其 flex-direction 属性设为 column-reverse，使弹性项目反向排列成一列。

亲手试试

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>