flex筛子写法第五个筛子怎么写的网上评论说可以用一个div写出来我是自学的不太明白

第五个盒子就是写不出来，如果用多个盒子包裹可以写出来，但是我自学视频里面的评论说可以用一个盒子写出来，找了很多网上资源，也写不出来，希望大家可以指教下，谢谢


!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="2.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="big">
        <div class="q"></div>
    </div>
    <!--  -->
    <div class="big2">
        <div class="q"></div>
        <div class="q2"></div>
    </div>
    <!--  -->
    <div class="big3">
        <div class="q"></div>
        <div class="q3"></div>
        <div class="q2"></div>
    </div>
    <!--  -->
    <div class="big4">
        <div class="q"></div>
        <div class="qq"></div>
        <div class="qq2"></div>
        <div class="qq3"></div>
    </div>
    <!--  -->
    <div class="big4">
        <div class="q"></div>
        <div class="qq"></div>
        <div class="qq2"></div>
        <div class="qq3"></div>
        <div class="qq4"></div>
        <div class="qq5"></div>
    </div>
    <!--  -->
    <!-- <div class="big5">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a2"></div>
        <div class="a1"></div>
        <div class="a"></div>
    </div> -->
</body>
</html>


*{
    padding: 0;
    margin: 0;
}
        /*  */
.big,.big2,.big3,.big4,.big5{
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background: rgba(128, 128, 128, 0.555);
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    border-radius:20px ;
    display: flex;
}
.q,.q2,.q3,.qq,.qq2,.qq3,.qq4,.qq5,.a,.a1,.a2{
    width: 34px;
    height: 30px;
    border-radius:50% ; 
    background: rgb(0, 0, 0);
}
/*  */
.big2{
    justify-content: space-between;
}
.q2{
    align-self: flex-end;
}
/*  */
.big3{
    justify-content: space-between;
}
.q3{
    align-self:center;
}
/*  */
.big4{
    flex-wrap: wrap;
    justify-content: space-between;
}
.qq2,.qq3{
    align-self: flex-end;
}
/*  */
.qq4{
    align-self: flex-end;
}
.qq5{
    align-self: flex-end;
}
/*  */
/* .big5{
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between; 
}
.a1{
    align-self: flex-end;
}
.a2{
    align-self: center;
} */

但是我用多个盒子写的话可以写出来

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="1.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="q">
        <div class="qq"></div>
    </div>
    <!--  -->
    <div class="dhz">
        <div class="q1">
            <div class="qq1">
            </div>
        </div>
        <div class="w2">
            <div class="qq2"></div>
        </div>
    </div>
    <!--  -->
    <div class="dhz">
        <div class="a1">
            <div class="aa1">
            </div>
        </div>
        <div class="a3">
            <div class="aa3"></div>
        </div>
        <div class="a2">
            <div class="aa2"></div>
        </div>
    </div>
    <!--  -->
    <div class="dhz">
        <div class="q1">
            <div class="qq1">
            </div>
            <div class="qqq1"></div>
        </div>
        <div class="q2">
            <div class="qqq2">
            </div>
            <div class="qq2"></div>
        </div>
    </div>
    <!--  -->
    <div class="dhz">
            <div class="q1">
                <div class="qq1">
                </div>
                <div class="qqq1"></div>
            </div>
            <div class="a3">
                    <div class="aa3"></div>
                </div>
            <div class="q2">
                <div class="qqq2">
                </div>
                <div class="qq2"></div>
            </div>
        </div>
        <!--  -->
        <div class="dhz">
                <div class="q1">
                    <div class="qq1">
                    </div>
                    <div class="qqq1"></div>
                </div>                                                                                                                   
                <div class="x3">
                        <div class="xx3"></div>
                        <div class="xx3"></div>
                    </div>
                <div class="q2">
                    <div class="qqq2">
                    </div>                                 
                    <div class="qq2"></div>
                </div>
            </div>
</body>
</html>

*{
    padding: 0;
    margin: 0;
}
/* body>div{
    float: left;
} */
.q{
    width: 100px;   
    height: 100px;
    background: rgba(128, 128, 128, 0.555);
    margin: 30px auto;
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:20px ;
}
.qq{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
} 

.dhz{
    width: 100px;
    height: 100px;
    border-radius:20px ;
    background: rgba(128, 128, 128, 0.555);
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
} 
.q1{
    flex: 1;
}
.w2{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.qq1{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.qq2{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}     

.dhz{
    width: 100px;
    height: 100px;
    border-radius:20px ;
    background: rgba(128, 128, 128, 0.555);
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
} 
.a1{
    flex: 1;
}
.a3{
    flex: 1;
    display: flex;
    justify-content: center;
}
.a2{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.aa1{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.aa2{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.aa3{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.dhz{
    width: 100px;
    height: 100px;
    border-radius:20px ;
    background: rgba(128, 128, 128, 0.555);
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
} 
.q1{
    flex: 1;
}
.q2{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.qq1{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.qq2{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}     
/*  */
.dhz{
    width: 100px;
    height: 100px;
    border-radius:20px ;
    background: rgba(128, 128, 128, 0.555);
    box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
} 
.q1{
    flex: 1;
    display: flex;
    justify-content: space-between;
}
.q2{
    flex: 1;
    display: flex; 
    justify-content: space-between;
}
.qq1{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}  
.qq2{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}     

.qqq1{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}
.qqq2{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}
.x3{
    flex: 1;
    display: flex;
    justify-content: space-between;

}
.xx3{
    width: 30px;
    height: 30px;
    border-radius:50% ;
    background: rgb(0, 0, 0);
}

还有对我自学的有什么好的建议吗？

使用 position 结合多个div写出来了，使用 flex 布局，感觉很麻烦，没弄


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  .shaizi {background: rgba(240, 240, 240, 0.555);box-shadow: inset 0 0 8px 5px rgb(128, 128, 128);display:inline-flex;width:100px;height:100px;border-radius:20px;position:relative;align-items:center;justify-content:center;margin:10px;}
  .shaizi .bigRed {background:red;border-radius:20px;width:40px;height:40px;box-shadow:inset 0 0 8px 5px rgb(220, 128, 128);}
  .shaizi .black {background:#333;border-radius:12px;width:24px;height:24px;box-shadow:inset 0 0 8px 5px rgb(128, 128, 128);position:absolute;}
  .shaizi .red {background:red;border-radius:12px;width:24px;height:24px;box-shadow:inset 0 0 8px 5px rgb(220, 128, 128);position:absolute;}
  .shaizi .red:first-of-type {left:20px;top:20px;}
  .shaizi .red:nth-of-type(2) {left:20px;top:56px;}
  .shaizi .red:nth-of-type(3) {left:56px;top:20px;}
  .shaizi .red:last-of-type {left:56px;top:56px;}
  .shaizi .black:first-of-type {left:15px;top:15px;}
  .shaizi .black:first-of-type + .black {left:61px;top:61px;}
  .shaizi:not(.num6) .black:first-of-type + .black + .black {left:38px;top:38px;}
  .shaizi.num6 .black:first-of-type + .black + .black {left:15px;top:38px;}
  .shaizi .black:first-of-type + .black + .black + .black {left:15px;top:61px;}
  .shaizi .black:first-of-type + .black + .black + .black + .black {left:61px;top:15px;}
  .shaizi .black:first-of-type + .black + .black + .black + .black + .black {left:61px;top:38px;}
  </style>
 </head>
 <body>
  <div class="shaizi num1"><div class="bigRed"></div></div>
  <div class="shaizi">
    <div class="black"></div>
    <div class="black"></div>
  </div>
  <div class="shaizi">
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
  </div>
  <div class="shaizi num4">
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
    <div class="red"></div>
  </div>
  <div class="shaizi">
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
  </div>
  <div class="shaizi num6">
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
    <div class="black"></div>
  </div>
 </body>
</html>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

flex筛子写法 第五个筛子怎么写的 网上评论说可以用一个div写出来 我是自学的不太明白

flex筛子写法第五个筛子怎么写的网上评论说可以用一个div写出来我是自学的不太明白