响应式灵活卡片布局

介绍

在这个项目中，你将学习如何使用 CSS Flexbox 创建一个灵活的卡片布局。灵活的卡片布局是网页和应用程序中常用的一种设计模式，其中内容以响应式且适应性强的网格状结构显示。

👀 预览

🎯 任务

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

• 如何选择要作为灵活盒子布局的元素
• 如何控制灵活容器内弹性项目的换行
• 如何控制弹性项目在主轴上的定位

🏆 成果

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

• 使用 CSS Flexbox 创建一个响应式且灵活的布局
• 应用控制灵活容器内弹性项目行为的技术
• 实现沿主轴定位和分布弹性项目的策略

设置项目结构

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

首先，打开编辑器。你应该会在编辑器中看到两个文件 —— flexible_card.html 和 flexible_card.css。

点击右下角的“Go Live”以打开端口 8080，在浏览器中预览 flexible_card.html 页面，效果如下：

设置灵活布局

在这一步中，你将学习如何使用弹性元素进行布局以达到预期效果。请按照以下步骤完成此步骤：

1. 在编辑器中打开 flexible_card.css 文件。
2. 在 CSS 文件中找到 section 选择器。
3. 向 section 选择器添加 display: flex; 属性，使 <section> 元素成为一个灵活的容器。

更新后的 CSS 代码应如下所示：

section {
  display: flex; /* 使 section 成为一个灵活的容器 */
  /* 其他样式 */
}

4. 向 section 选择器添加 flex-wrap: wrap; 属性，以便如果弹性项目在同一行放不下，它们可以换行到下一行。

更新后的 CSS 代码应如下所示：

section {
  display: flex;
  flex-wrap: wrap; /* 允许弹性项目换行到下一行 */
  /* 其他样式 */
}

5. 向 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;
}

现在，你的灵活卡片布局应该完成了，并且与示例中显示的最终结果匹配。

总结

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