使用 Flexbox 的响应式骰子布局

简介

在这个项目中，你将学习如何使用Flexbox CSS创建一个响应式骰子布局。目标是按照特定的布局要求排列一组带有不同点数图案的骰子。

👀 预览

🎯 任务

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

• 如何使用HTML和CSS设置骰子布局的基本结构
• 如何使用诸如 justify-content、align-items、flex-direction 和 align-self 等Flexbox属性来定位每个骰子内的点数
• 如何实现诸如 flex-wrap 和 flex-basis 等高级Flexbox技术来创建所需的布局

🏆 成果

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

• 使用Flexbox创建复杂的响应式布局
• 理解不同的Flexbox属性以及如何有效地应用它们
• 通过遵循逐步说明并实现所需的布局来培养解决问题的能力

Skills Graph

布局骰子1

首先，打开编辑器。你应该会在编辑器中看到一个文件 —— index.html。

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

在这一步中，你将使用 justify-content 和 align-items 属性来定位第一个骰子内的点数。

1. 在代码编辑器中打开 index.html 文件。
2. 在 <style> 部分，为 .div1 类添加以下规则：

.div1 {
  justify-content: center;
  align-items: center;
}

justify-content: center 使点数在水平方向上居中，而 align-items: center 使其在垂直方向上居中。

布局骰子2

在这一步中，你将使用 justify-content、flex-direction 和 align-items 属性来定位第二个骰子内的点数。

1. 在 <style> 部分，为 .div2 类添加以下规则：

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

justify-content: space-around 沿主轴（水平方向）均匀分布点数，flex-direction: column 垂直堆叠点数，align-items: center 使它们在骰子内居中。

布局骰子3

在这一步中，你将使用 justify-content、align-self 和 align-items 属性来定位第三个骰子内的点数。

1. 在 <style> 部分，为 .div3 类添加以下规则：

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

justify-content: space-around 沿主轴（水平方向）均匀分布点数，align-items: center 使它们在垂直方向上居中，padding: 10px 在骰子周围添加一些间距。

align-self 属性用于分别将第一个和最后一个点数定位在骰子的顶部和底部。

布局骰子4、5、6、7和9

在这一步中，你将使用 justify-content、align-self、flex-direction 和 align-items 属性来定位其余骰子内的点数。

1. 在 <style> 部分，为 .div4 类添加以下规则：

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

justify-content: space-around 沿主轴（水平方向）均匀分布点数，flex-direction: column 垂直堆叠点数，align-items: center 使它们在骰子内居中。

内部的 <div> 元素用于将点数水平分组，justify-content: space-around 用于均匀分布它们。align-self: center 属性用于使各个点数在其各自的行内居中。

布局骰子8

在这最后一步中，你将使用 justify-content、align-self、flex-wrap 和 flex-basis 属性来定位第八个骰子内的点数。

1. 在 <style> 部分，为 .div8 类添加以下规则：

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

flex-wrap: wrap 属性允许点数在一行放不下时换行。padding: 2px 在骰子周围添加一些间距。

内部的 <div> 元素用于将点数水平分组，justify-content: space-between 用于均匀分布它们，align-items: center 用于使它们在垂直方向上居中。flex-basis: 100% 确保每行占据骰子的整个宽度。

通过遵循这些步骤，你已成功按照要求实现了弹性骰子布局。

总结

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