flex布局实现骰子样式

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

样式效果如下

四点

flex布局实现骰子样式

一点

二点

三点

四点

推荐阅读更多精彩内容