南宁小程序开发,挑战百日学习计划第28天（flex骰子布局教程）

生无可恋只想学编程 南宁小程序开发 www.zkelm.com

flex布局骰子教程源码，我也是根据网上写的教程，巩固使用经验，废话不多数 开干Doing

1.首先先制作一个骰子的模板 代码如下

<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>

运行结果：