使用 CSS Flexbox 进行水果摆放

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

最终水果摆放布局

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css/BasicConceptsGroup -.-> css/properties("`Properties`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") subgraph Lab Skills css/properties -.-> lab-300076{{"`使用 CSS Flexbox 进行水果摆放`"}} css/box_model -.-> lab-300076{{"`使用 CSS Flexbox 进行水果摆放`"}} css/width_and_height -.-> lab-300076{{"`使用 CSS Flexbox 进行水果摆放`"}} css/display_property -.-> lab-300076{{"`使用 CSS Flexbox 进行水果摆放`"}} css/flexbox -.-> lab-300076{{"`使用 CSS Flexbox 进行水果摆放`"}} end

设置项目结构

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

首先,打开编辑器。你应该能看到一些文件——编辑器中的 index.htmlstyle.cssimages

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

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

未完成的项目结构

设计水果摆放样式

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

  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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程