生无可恋只想学编程 南宁小程序开发 www.zkelm.com
flex布局骰子教程源码，我也是根据网上写的教程，巩固使用经验，废话不多数 开干Doing
<body>
<head>
<title>骰子-一点布局居中</title>
<style>
body{background:#000;}
.Box{
display:flex;
width:90px;
height:90px;
border:1px solid #fff;
background:#bbb;
border-radius:10px;
justify-content:center;
align-items:center;
}
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
Box-shadow:2px 2px 3px #888;
justify-content:center;
align-items:center;
}
.flexitems{
margin:5px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
</style>
</head>
<body>
<div class="Box">
<div class="flexcontainer">
<div class="flexitems"></div>
</div>
</div>
</body>
运行结果：
两个点的时候怎么排布呢？ 思路大致如下：
1.左上角 2.右下角 3.中间是space-between
1.先加入两个 flexitems 黑色骰子在里面
<div class="flexcontainer">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
运行结果如下：
2.设置他们的横向分布为：justify-content:space-between
justify-content:space-between;
这样子间距就会拉开
选择第二个骰子 .flexitems：nth-child(2) 设置属性为 align-self：flex-end 把第二个骰子的纵向放在end位置即可
.flexitems:nth-child(2){
align-self:flex-end;
}
运行结果：
同理：三个骰子的时候 怎么布局呢：
只需要设置第二个黑点在中间即可： align-self:center;
完整代码如下：
<body>
<head>
<title>骰子-一点布局居中</title>
<style>
body{background:#000;}
.Box{
display:flex;
width:90px;
height:90px;
border:1px solid #fff;
background:#bbb;
border-radius:10px;
justify-content:center;
align-items:center;
}
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
Box-shadow:2px 2px 3px #888;
justify-content:space-between;
}
.flexitems{
margin:3px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
.flexitems:nth-child(2){
align-self:center;
}
.flexitems:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div class="Box">
<div class="flexcontainer">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</body>
运行结果：
