flex原理网上很多博客都讲解的很详细，这篇博客属于实战，利用flex来实现一些有趣好玩的样式——骰子样式
骰子样式
如何利用flex来实现上图样式
如不加说明，默认html和css样式如下
<div class="box">
<div class="item"></div>
</div>
.box{
background: #111;
width:200px;
height:200px;
}
.item{
width:50px;
height:50px;
border-radius:25px;
background:#eee;
margin:10px;
}
一点
一点item需要水平垂直都居中。
代码如下
.box{
display:flex;
justify-content: center;
align-items:center;
}
样式效果如下
一点
二点
二点需要左上和右下都有item元素，代码实现如下
.box{
display:flex;
justify-content:space-between;
}
.item:nth-child(2){
align-self:flex-end;
}
样式效果图如下
二点
三点
三点需要左上右下中间各一点
代码实现如下
.box{
display:flex;
justify-content:space-between;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
样式效果图如下
三点
四点
四点需要左上右上左下右下都有一点
代码实现如下
<div class="box">
<div class="col">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.col{
display:flex;
flex-basis:100%;
justify-content: space-between;
}
样式效果如下
四点
