使用 CSS Flexbox 进行水果摆放

介绍

在这个项目中，你将学习如何使用 CSS Flexbox 创建一个水果摆放布局。你将学习如何使用 align-self 和 order 属性来在碗中定位和排列水果。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何为水果摆放设置 HTML 结构
• 如何使用 align-self 属性沿交叉轴对齐各个弹性项目
• 如何使用 order 属性更改弹性项目的顺序
• 如何使用 Flexbox 将水果排列成所需的布局

🏆 成果

完成这个项目后，你将能够：

• 使用 CSS Flexbox 创建一个响应式且视觉上吸引人的布局
• 应用 align-self 和 order 属性来控制元素的定位和排列
• 使用 CSS 选择器和属性实现所需的设计

设置项目结构

在这一步中，你将学习如何设置项目结构。

首先，打开编辑器。你应该能看到一些文件——编辑器中的 index.html、style.css 和 images。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你就会看到页面。

设计水果摆放样式

在这一步中，你将学习如何使用 align-self 和 order 属性来设计水果摆放的样式。按照以下步骤完成此步骤：

1. 在编辑器中打开 index.css 文件。
2. 选择 .yellow 类，并将 align-self 属性设置为 flex-end。
3. 将 .yellow 类的 order 属性设置为 1。

你的 index.css 文件现在应该如下所示：

.yellow {
  align-self: flex-end;
  order: 1;
}

align-self 属性用于沿交叉轴对齐各个弹性项目，覆盖 align-items 的值。在这种情况下，我们将其设置为 flex-end，以便将黄色水果对齐到碗的底部。

order 属性用于更改弹性项目的顺序。我们将黄色水果的 order 设置为 1，这会将它放置在弹性容器的末尾。

最终结果如下：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。