介绍
在这个项目中，你将学习如何使用 CSS Flexbox 创建一个视觉上吸引人的水果拼盘。目标是将相同颜色的水果放置在其相应颜色板的中间，创建一个和谐且美观的展示效果。
👀 预览
🎯 任务
在这个项目中，你将学习：
- 如何设置一个弹性容器来组织拼盘上的水果
- 如何将相同颜色的水果放置在其相应颜色板的中间
🏆 成果
完成这个项目后，你将能够：
- 使用 CSS Flexbox 创建类似网格的布局
- 在弹性容器中居中并对齐元素
- 以视觉上吸引人的方式在网页上有效地组织和展示元素
设置项目结构
在这一步中，你将学习如何设置项目结构。
首先，打开编辑器。你应该能看到一些文件——编辑器中的 index.html、style.css 和 images。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你就会看到页面。
设置弹性容器
在这一步中，你将学习如何设置弹性容器来组织拼盘上的水果。
- 在你的代码编辑器中打开
index.css文件。 - 在
#pond选择器内，添加以下 CSS 属性：
#pond {
/* 待办事项：在此处添加你的 CSS 代码 */
display: flex;
flex-direction: column;
flex-wrap: wrap;
}display: flex 属性将 #pond 元素设置为弹性容器，使我们能够使用弹性盒布局来定位水果。
flex-direction: column 属性将弹性项目（水果容器）垂直堆叠。
flex-wrap: wrap 属性允许弹性项目在当前行放不下时换行到下一行。
最终结果如下：
总结
恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。
