简介 在这个项目中,你将学习如何使用 CSS Flexbox 创建一个灵活的卡片布局。灵活的卡片布局是网页和应用程序中常用的一种设计模式,其中内容以响应式且适应性强的网格状结构显示。 👀 预览 🎯 任务 在这个项目中,你将学习: 如何选择要作为灵活盒子布局的元素 如何控制灵活容器内弹性项目的换行 如何控制弹性项目在主轴上的定位 🏆 成果 完成这个项目后,你将能够: 使用 CSS Flexbox 创建一个响应式且灵活的布局 应用控制灵活容器内弹性项目行为的技术 实现沿主轴定位和分布弹性项目的策略 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/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") subgraph Lab Skills css/properties -.-> lab-300067{{"`响应式灵活卡片布局`"}} css/box_model -.-> lab-300067{{"`响应式灵活卡片布局`"}} css/display_property -.-> lab-300067{{"`响应式灵活卡片布局`"}} css/flexbox -.-> lab-300067{{"`响应式灵活卡片布局`"}} end
设置项目结构 在这一步中,你将学习如何设置项目结构。 首先,打开编辑器。你应该会在编辑器中看到两个文件 —— flexible_card.html 和 flexible_card.css。 点击右下角的“Go Live”以打开端口8080,在浏览器中预览 flexible_card.html 页面,效果如下:
设置灵活布局 在这一步中,你将学习如何使用弹性元素进行布局以达到预期效果。请按照以下步骤完成此步骤: 在编辑器中打开 flexible_card.css 文件。 在CSS文件中找到 section 选择器。 向 section 选择器添加 display: flex; 属性,使 <section> 元素成为一个灵活的容器。 更新后的CSS代码应如下所示: section { display: flex; /* 使section成为一个灵活的容器 */ /* 其他样式 */ } 向 section 选择器添加 flex-wrap: wrap; 属性,以便如果弹性项目在同一行放不下,它们可以换行到下一行。 更新后的CSS代码应如下所示: section { display: flex; flex-wrap: wrap; /* 允许弹性项目换行到下一行 */ /* 其他样式 */ } 向 section 选择器添加 justify-content: space-between; 属性,以便沿主轴均匀分布弹性项目,它们之间有相等的间距。 更新后的CSS代码应如下所示: section { display: flex; flex-wrap: wrap; justify-content: space-between; /* 沿主轴均匀分布弹性项目 */ /* 其他样式 */ } 完成这三个步骤后,你的 flexible_card.css 文件应如下所示: section { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 900px; margin: 0 auto; padding: 20px; } 现在,你的灵活卡片布局应该完成了,并且与示例中显示的最终结果匹配。