欢迎来到 CSS 布局基础实验！在本实践环节中，你将探索 CSS Flexbox 的基础知识。Flexbox 是一种强大的布局模型，它提供了一种高效的方式来排列、对齐和分配容器内各项之间的空间。
在本次实验中，你将使用一个预先配置好的 HTML 文件 (index.html) 和一个 CSS 文件 (style.css)。你的任务是修改 style.css 文件来调整页面上元素的布局。你可以在实验环境中切换到 Web 8080 标签页，实时查看你的更改。
你将学习如何：
justify-content 沿主轴对齐各项。align-items 沿交叉轴对齐各项。flex-direction 更改布局方向。flex-wrap 允许各项换行到多个行。让我们开始吧！
在本步骤中，你将首先将一个标准的块级元素转换为 flex 容器。这是创建任何 flexbox 布局的基础步骤。
display: flex; 属性应用于父元素（容器），从而为所有直接子元素（各项）启用 flex 上下文。应用后，子元素会自动排列成一行。
首先，从屏幕左侧的文件浏览器中打开 style.css 文件。
接下来，找到 .container CSS 规则。将 display: flex; 属性添加到此规则中。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
/* We will add flex properties here */
display: flex;
}添加代码后，保存文件。现在，切换到 Web 8080 标签页查看结果。你会注意到，之前垂直堆叠的编号框现在水平排列在单行中。
在本步骤中，你将学习如何使用 justify-content 属性来控制各项沿主轴（默认是水平方向）的对齐。此属性有助于分配容器内的额外可用空间。
我们将使用 space-between 值，它会均匀地分配各项。第一个项目位于容器的起始位置，最后一个项目位于结束位置，其余空间则在各项之间平均分配。
在你的 style.css 文件中，将 justify-content: space-between; 属性添加到 .container 规则中。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
}保存文件并查看 Web 8080 标签页。你会看到 flex 项目现在分布在容器的整个宽度上，并且它们之间有相等的间距。
在本步骤中，你将学习使用 align-items 属性来控制各项沿交叉轴（默认是垂直方向）的对齐。
为了看到垂直对齐的效果，我们首先需要给容器设置一个高度。然后，我们将为 align-items 使用 center 值，以便在容器内垂直居中各项。
在你的 style.css 文件中，向 .container 规则添加 height 和 align-items: center; 属性。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}保存文件并在 Web 8080 标签页中查看结果。容器现在更高了，并且所有 flex 项目都完美地居中在垂直空间的中间。
在本步骤中，你将使用 flex-direction 属性将主轴的方向从水平更改为垂直。
默认情况下，flex 方向是 row。通过将其设置为 column，你可以将 flex 项目垂直堆叠。当你将 flex 方向更改为 column 时，主轴变为垂直，交叉轴变为水平。这意味着 justify-content 将控制垂直对齐，而 align-items 将控制水平对齐。
在你的 style.css 文件中，向 .container 规则添加 flex-direction: column; 属性。
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
height: 400px; /* Let's increase height for better visualization */
align-items: center;
flex-direction: column;
}注意：我们将高度增加到 400px，以便在 column 布局中更好地看到 justify-content 的效果。
保存文件并在 Web 8080 标签页中观察更改。项目现在堆叠成一列。注意 justify-content: space-between 现在如何在项目之间垂直添加空间，而 align-items: center 则将它们水平居中。
在最后一步中，你将学习如何处理 flex 项目溢出容器的情况。flex-wrap 属性允许项目换到新的一行，而不是收缩或溢出。
为了演示这一点，我们将恢复到基于行的布局，并为容器设置一个固定的宽度，该宽度太窄而无法容纳所有项目在一行中。
首先，让我们清理 .container 规则，移除前几个步骤中的属性（justify-content、align-items、flex-direction 和 height）。然后，添加固定的 width 和 flex-wrap: wrap; 属性。
更新 style.css 中的 .container 规则，使其如下所示：
.container {
border: 2px solid #333;
padding: 10px;
margin-top: 20px;
background-color: #f0f0f0;
display: flex;
width: 450px; /* Set a fixed width to force wrapping */
flex-wrap: wrap;
}保存文件并刷新 Web 8080 标签页。你将看到不适合第一行的 flex 项目已换到第二行。这对于创建适应不同屏幕尺寸的响应式布局至关重要。
恭喜你完成了 CSS 布局基础实验！你已成功掌握了 CSS Flexbox 的核心概念，并将其应用于创建灵活且响应式的布局。
在此实验中，你练习了：
display: flex;: 用于创建 flex 容器。justify-content: 用于沿主轴对齐项目。align-items: 用于沿交叉轴对齐项目。flex-direction: 用于定义主轴的方向（行或列）。flex-wrap: 用于允许项目换到多行。这些属性是现代网页设计的基石。我们鼓励你继续尝试这些属性的不同值，以进一步巩固你对 Flexbox 的理解。
