在本实验中，你将探索 CSS Flexbox 中可用的各种 flex 方向，通过动手实践了解元素如何在 flex 容器中排列和定位。通过逐步操作，你将创建一个 HTML 结构，并逐步实现不同的 flex 方向属性，包括 row（行）、row-reverse（行反向）、column（列）和 column-reverse（列反向）方向。
实验首先通过设置一个包含 flex 容器和多个 flex 项目的基础 HTML 文件，直观展示 flex 方向如何影响布局。通过修改 CSS 的 flex-direction 属性，你将学习如何控制元素的流动和定位，理解 CSS Flexbox 的基本原理及其强大的布局能力。
在这一步中，你将创建一个基础的 HTML 结构，用于演示 CSS Flexbox 的方向。我们将设置一个包含多个 div 元素的简单 HTML 文件，以帮助我们探索不同的 flex 方向。
首先，打开 WebIDE 并导航到 ~/project 目录。右键点击文件资源管理器并选择“新建文件”，创建一个名为 flexbox-demo.html 的文件。
将以下 HTML 代码复制到 flexbox-demo.html 文件中：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Direction Demo</title>
<style>
.flex-container {
display: flex;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>
</body>
</html>让我们分解一下这个 HTML 结构的关键部分：
flex-container 类的 <div>，它将作为我们的 flex 容器。flex-item 类的 <div> 元素。<style> 部分，我们添加了基本的 CSS 来：
display: flex这个初始设置提供了一个简洁、简单的结构，我们将在接下来的步骤中使用它来演示不同的 flex 方向。
在这一步中，你将学习 CSS Flexbox 中的默认 flex 方向：行方向（row direction）。行方向是默认布局，其中 flex 项目从左到右水平排列。
在 WebIDE 中打开 flexbox-demo.html 文件，并修改 <style> 部分，显式地将 flex 方向设置为 row：
<style>
.flex-container {
display: flex;
flex-direction: row; /* 显式设置为行方向（默认） */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>关于行方向的关键点：
flex-direction: row 是 flex 容器的默认值在 Web 浏览器中的示例输出将显示四个绿色方块从左到右水平排列。
为了帮助你理解视觉上的差异，请注意项目是如何在没有额外配置的情况下自然地并排排列的。这展示了默认行方向的行为。
在这一步中，你将探索 row-reverse flex 方向，它会在保持水平布局的同时改变 flex 项目的顺序。
在 WebIDE 中打开 flexbox-demo.html 文件，并修改 <style> 部分，将 flex 方向设置为 row-reverse：
<style>
.flex-container {
display: flex;
flex-direction: row-reverse; /* 水平方向上反转项目顺序 */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>行反向 flex 方向的关键特性：
当你在 Web 浏览器中查看时，你会注意到项目现在从右到左排列，其中“Item 4”出现在左侧，而“Item 1”出现在右侧。
这展示了 flex-direction: row-reverse 如何在保持水平布局的同时，允许你改变 flex 项目的视觉顺序。
在这一步中，你将探索 column flex 方向，它将 flex 项目从上到下垂直排列。
在 WebIDE 中打开 flexbox-demo.html 文件，并修改 <style> 部分，将 flex 方向设置为 column：
<style>
.flex-container {
display: flex;
flex-direction: column; /* 垂直排列项目 */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
height: 500px; /* 添加高度以使垂直布局可见 */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>列方向 flex 方向的关键特性：
当你在 Web 浏览器中查看时，你会注意到项目现在垂直排列：
这展示了 flex-direction: column 如何将布局从水平变为垂直，提供了一种使用 Flexbox 创建垂直布局的简单方法。
在这一步中，你将探索 column-reverse flex 方向，它将 flex 项目从下到上垂直排列。
在 WebIDE 中打开 flexbox-demo.html 文件，并修改 <style> 部分，将 flex 方向设置为 column-reverse：
<style>
.flex-container {
display: flex;
flex-direction: column-reverse; /* 从下到上垂直排列项目 */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
height: 500px; /* 添加高度以使垂直布局可见 */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>列反向 flex 方向的关键特性：
当你在 Web 浏览器中查看时，你会观察到：
这展示了 flex-direction: column-reverse 如何提供一种简单的方法来改变 flex 项目的垂直堆叠顺序。
在本实验中，参与者通过创建一个全面的 flex 方向演示来探索 CSS Flexbox 的基础知识。实验从一个包含 flex 容器和多个 flex 项目的结构化 HTML 文件开始，为理解不同的布局技术提供了视觉基础。通过实现一系列 flex 方向样式，学习者能够获得使用 CSS Flexbox 操作元素排列的实践经验。
实验系统地引导参与者完成四种关键的 flex 方向配置：row（默认）、row-reverse、column 和 column-reverse。每种方向都通过动手编码进行探索，使学生能够理解 flex-direction 如何影响容器内元素的定位和流动。这种方法使学习者能够深入理解弹性盒布局原理及其在响应式网页设计中的应用。
