美文网首页
flex布局实现骰子样式

flex布局实现骰子样式

作者: STARKXJ | 来源:发表于2019-01-26 12:06 被阅读0次

    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布局实现骰子样式

          本文链接:https://www.haomeiwen.com/subject/yvxijqtx.html