flex布局实现骰子的6种布局

先上效果图

整个页面分为6骰子的面，分别为点数1到6

    <div class="dice">
        <!-- 点数1 -->
        <div class="points points-1"></div>
        <!-- 点数2 -->
        <div class="points points-2"></div>
        <!-- 点数3 -->
        <div class="points points-3"></div>
        <!-- 点数4 -->
        <div class="points points-4"></div>
        <!-- 点数5 -->
        <div class="points points-5"></div>
        <!-- 点数6 -->
        <div class="points points-6"></div>
    </div>


.dice {
    background: #000;
    display: flex;
    flex-wrap: wrap;
    .points {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 20px;
        margin: 100px;
        padding: 15px;
    }
}

点数1：典型的居中布局

思路：让其子元素分别在主轴和交叉轴上居中，用justify-content和align-items

        <!-- 点数1 -->
        <div class="points points-1">
            <div class="item item-1"></div>
        </div>


    .points-1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-1{
        width: 30px;
        height: 30px;
        background: #f90821;
    }

点数2：

 思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后再设置居中对齐align-items: center

        <!-- 点数2 -->
        <div class="points points-2">
            <div class="item item-2"></div>
            <div class="item item-2"></div>
        </div>


    .points-2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

点数3：

 思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后将第二个子元素居中对齐align-self: center，第三个子元素靠后对齐align-self: end

        <!-- 点数3 -->
        <div class="points points-3">
            <div class="item item-3"></div>
            <div class="item item-3"></div>
            <div class="item item-3"></div>
        </div>

    .points-3 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .item-3:nth-child(2) {
            align-self: center;
        }
        .item-3:nth-child(3) {
            align-self: end;
        }
    }