弹性盒子经典布局——骰子布局

弹性盒子经典布局

在下小白一枚，只是为了分享交流，有问题联系我修改把！
众所周知弹性盒子是非常好用的一个东西，现在呢我展示一下弹性布局里面经典的布局——骰子布局。
所用到的知识点有以下这一些：容器属性、项目属性
一点布局：

> ```
> .box { 
> 		display: flex; 
> 		justify-content: center; 
> 		align-items: center; 
> 	} 
> ```

上面是一点的CSS布局代码，首先运用了flex然后使用了两个容器属性，在这个地方值得一提的是：在弹性容器里面我们是可以使用margin：auto实现左右和垂直居中的效果（但是一定要注意，在非弹性盒子里面不要使用margin实现垂直居中）但是在三点那个地方是不能用margin实现的。只限于一点。
下面是使用magrin实现一点的代码。
二点布局：

.box { 
		display: flex; 
		justify-content:
     space-between;
  } 
.item:nth-child(2) { 
		align-self: flex-end; 
	}

显示图片如下：

三点布局：

.box { 
		display: flex; 
	 } 
.item:nth-child(2) { 
		align-self: center; 
	} 
.item:nth-child(3) { 
		align-self: flex-end;
	} 

四点布局：

HTML代码如下。

> ```
<div class="out">
			<div class="item1">
				<div class="xm1"></div>
				<div class="xm2"></div>
			</div>
			<div class="item1">
				<div class="xm3"></div>
				<div class="xm4"></div>
			</div>
		</div>
> ```

CSS代码如下。

> ```
.out{
	width: 500px;
	height: 500px;
	background-color: #87CEEB;
	display: flex;
	justify-content: space-between;
	padding: 50px;
	border-radius: 5px;
}
.xm1,.xm2,.xm3,.xm4{
	width: 24px;
	height: 24px;
	background-color: #000000;
	border-radius: 12px;
}

.item1{
	display: flex;
	flex-direction: column;
	justify-content: space-between;}

> ```

四点布局我详细的说一下，大体思路如下：先设置一个大盒子然后在大盒子里面设置弹性布局，然后再大盒子里面设置两个item然后换轴以及设置space-between
五点布局

HTML代码如下
<div class="out">
			<div class="item1">
				<div class="xm1"></div>
				<div class="xm2"></div>
			</div>
			<div class="item3">
				<div class="xm3"></div>
			</div>
			<div class="item2">
				<div class="xm3"></div>
				<div class="xm4"></div>
			</div>
		</div>
CSS代码如下
.out{
	width: 500px;
	height: 500px;
	background-color: #87CEEB;
	display: flex;
	justify-content: space-between;
	padding: 50px;
	border-radius: 5px;
}
.xm1,.xm2,.xm3,.xm4,.xm3{
	width: 24px;
	height: 24px;
	background-color: #000000;
	border-radius: 12px;
}

.item1{
	display: flex;
	flex-direction: column;
	justify-content: space-between;}
.item2{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.item3{
	display: flex;
	align-items: center;
}

在五点里面需要注意的是中间那个点不可以用margin-auto设置，设置中间的点的时候先用三个圆点去占位然后用center最后将她删除即可