考试需求
补全 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 属性实现。
根据试题需求中要求的属性进行页面布局,无需过多样式设置。按以上要求完成以下效果(页面整体宽度 1024px):
解决办法
通过css调整
参考代码
index.html
<!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;
}
.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 p:nth-child(1) {
align-self: flex-start;
}
.div3 p:nth-child(2) {
align-self: center;
}
.div3 p:nth-child(3) {
align-self: flex-end;
}
/*todo:请补全剩余骰子布局代码*/
.div8{
justify-content: space-around;
flex-direction: column
}
.div8 div{
display: flex;
justify-content:space-between;
flex-basis: auto;
}
.div9{
justify-content: space-around;
flex-direction: column
}
.div9 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;
}
.div6{
justify-content: space-around;
flex-direction: column
}
.div6 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;
}
.div4{
justify-content: space-around;
flex-direction: column
}
.div4 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></p>
<p></p>
<p></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></p>
<p></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>
代码参考:原文