利用flex布局实现六个骰子

一、初步布局

1、我们先设立一个外部盒子用flex布局将子代居中

.father {
        display: flex;
        margin: 200px auto;
        border-top: 2px solid #828384;
        width: 1200px;
        height: 300px;
        justify-content: space-around;
    }

再使用亲代选择器设置骰子盒子css

.father>div {
        display: flex;
        margin: 20px;
        border-radius: 15px;
        border: 5px solid black;
        width: 140px;
        height: 140px;
    }

二、设置各面

我们先将每一个红点设置好

.w {
     
        margin: 10px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: red;
    }

1、设置第一面

<div class="one">
            <span class="w">span>
        div>

将其居中对其

.one {
     
        justify-content: center;
        align-items: center;
    }

2、设置第二面

<div class="two">
            <span class="w">span>
            <span class="w">span>
        div>

.two,
    .three,
    .four,
    .five,
    .six {
     
        justify-content: space-between;
    }

再把第二个点下移

.two span:nth-child(2) {
     
        align-self: flex-end;
    }

3、设置第三面

 <div class="three">
            <span class="w">span>
            <span class="w">span>
            <span class="w">span>
        div>

div的css上图
我们将第二个点放置中间第三个点下移

.three span:nth-child(2) {
     
        align-self: center;
    }

    .three span:nth-child(3) {
     
        align-self: flex-end;
    }

4、第四面
我们可以设置两条竖列每一列放两个点

<div class="four">
            <div class="column">
                <span class="w">span>
                <span class="w">span>
            div>
            <div class="column">
                <span class="w">span>
                <span class="w">span>
            div>

再设置css

.column {
     
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

5、第五面
我们可以设置两个竖列再加中间一个小span

<div class="five">
            <div class="column">
                <span class="w">span>
                <span class="w">span>
            div>
            <span class="center w">span>
            <div class="column">
                <span class="w">span>
                <span class="w">span>
            div>
        div>

再把中间的span调整一下

.five .center {
     
        align-self: center;
    }

6、第六个和第四个类似

<div class="six">
            <div class="column">
                <span class="w">span>
                <span class="w">span>
                <span class="w">span>
            div>
            <div class="column">
                <span class="w">span>
                <span class="w">span>
                <span class="w">span>
            div>
        div>

最后我们来看看效果图

注意！！！
当有多个div时千万要仔细，千万不要有了

没有相应的