题目来源：蓝桥杯【页面布局】Flex 经典骰子布局（web应用开发）
题目要求：
补全 index.html 文件空缺的 css 代码。
骰子 1：使用 justify-content 与 align-items 属性实现。
骰子 2：使用 justify-content、flex-direction 与 align-items 属性实现。
骰子 3：使用 justify-content、align-self 与 align-items 属性。
骰子 4、5、6、7、9 布局结构类似：使用 justify-content、align-self、 flex-direction 与 align-items 属性实现。
骰子 8：使用 justify-content、flex-wrap、flex-basis 与 align-items 属性实现。
最终实现效果
实现过程
本题主要使用flex盒子标签的弹性布局实现，flex标签有以下属性：
- justify-content:定义了项目在主轴上的对齐方式
- flex-direction：决定主轴的方向（即项目的排列方向）
- align-items：项目在交叉轴上如何对齐
- flex-wrap：项目都排在一条线（又称”轴线”）上 最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>骰子布局</title>
<style>
body {
margin: 10px 0 0 0;
display: flex;
justify-content: space-around;
}
body>div {
display: flex;
width: 100px;
height: 100px;
border-radius: 4px;
border: 2px solid red;
box-sizing: border-box;
}
p {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
margin: 2px;
}
.div1 {
justify-content: center;
align-items: center;
}
/*todo:请补全剩余骰子布局代码*/
.div2{
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.div3{
justify-content: space-around;
flex-direction: column;
}
.div3 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div3 #one{
align-self: flex-start;
}
.div3 #two{
align-self: center;
}
.div3 #three{
align-self: flex-end;
}
.div4{
justify-content: space-around;
flex-direction: column;
}
.div4 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div4{
justify-content: space-around;
flex-direction: column;
}
.div4 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div5{
justify-content: space-around;
flex-direction: column;
}
.div5 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div6{
justify-content: space-around;
flex-direction: column;
}
.div6 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div7{
justify-content: space-around;
flex-direction: column;
}
.div7 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div8{
justify-content: space-around;
flex-direction: column;
}
.div8 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div8 #one{
margin-left: -11px;
}
.div8 #two{
margin-right: -11px;
}
.div9{
justify-content: space-around;
flex-direction: column;
}
.div9 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
</style>
</head>
<body>
<!--骰子1-->
<div class="div1">
<p></p>
</div>
<!--骰子2-->
<div class="div2">
<p></p>
<p></p>
</div>
<!--骰子3-->
<div class="div3">
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
</div >
<!--骰子4-->
<div class="div4">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子5-->
<div class="div5">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子6-->
<div class="div6">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<!--骰子7-->
<div class="div7">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子8-->
<div class="div8">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p id="one"></p>
<p id="two"></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子9-->
<div class="div9">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
调试
在flex弹性布局中，可以使用浏览器开发者工具进行对于flex 的调试：
得到想要的效果
