flex 布局实现三点筛子

发布时间：2020-12-15 01:43:52 所属栏目：百科来源：网络整理

导读：实现麻将中三点筛子：效果如下图具体实现代码： html代码： div class ="box" div class ="item" / div div class ="item" / div div class ="item" / div div ? css 代码： .box { width : 200px ; height : 200px ; padding : 20px ; display : flex ; fl

实现麻将中三点筛子：效果如下图

具体实现代码：

　　html代码：

  <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    <div>

　　　　css 代码：

   .box{
        width: 200px;
        height: 200px;
        padding: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between; /*设置两端对齐*/
        border: 2px solid #ccc;
        border-radius: 10px;
    }
    .item{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2){
        align-self: center; /*垂直方向居中*/
    }
    .item:nth-child(3){
        align-self: flex-end; /*垂直方尾对齐*/
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

flex 布局 实现三点筛子

flex 布局实现三点筛子