1.首先摆好html结构，ul>li有几点就嵌套几个li
html结构如下:
<!-- 1点 -->
<ul>
<li></li>
</ul>
<!-- 2点 -->
<ul>
<li></li>
<li></li>
</ul>
<!-- 3点 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 4点 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 5点 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 6点 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2.重点在于css样式
准备工作：
(1)清除浏览器自带的内外边距+li自带的小圆点样式
(2)统一设置ul基础样式+开启flex布局
(3)统一设置li基础样式
1点：盒子主轴居中对齐+侧轴居中对齐
2点：ul切换主轴方向+主轴盒子左右间隙一样对齐+侧轴居中对齐
3点：
（1）ul切换主轴方向+主轴盒子两侧没缝隙，中间间距相同对齐
（2）第二个li侧轴居中对齐
（3）第三个li侧轴终点排列
4点：
（1）盒子两边间隙一致排列+自动换行
（2）给所有li设置一样的外边距，相互挤开
上下左右外边距=（ul的总宽高-2个li的总宽高）/4
5点：
（1）主轴盒子左右间隙一样对齐+侧轴盒子居中对齐+自动换行
（2）给中间第3个li设置外边距来相互挤开
上下外边距为0
左右外边距=（ul的总宽-1个li的宽）/2+li自身宽度的一半
6点：
（1）盒子两边间隙一致排列+自动换行+更换主轴方向
（2）给每个li设置相同外边距相互挤开
上下外边距= (ul总高-3行3个li的总高）/6
左右外边距=（ul的总宽-2个li的总宽）/4
css样式如下:
/* 清除浏览器自带样式 */
* {
padding: 0;
margin: 0;
list-style: none;
}
/* 统一设置ul的样式 */
ul {
height: 90px;
width: 90px;
background-color: rgb(240, 238, 238);
border-radius: 15px;
margin: 30px;
display: flex;
float: left;
}
/* 统一设置li的样式 */
ul li {
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
}
/* 1点 */
ul:nth-child(1) {
align-items: center;
justify-content: center;
}
/* 2点 */
ul:nth-child(2) {
align-items: center;
flex-direction: column;
justify-content: space-evenly;
}
/* 3点 */
ul:nth-child(3) {
flex-direction: column;
justify-content: space-around;
}
ul:nth-child(3) li:nth-child(1) {
margin: 5px;
}
ul:nth-child(3) li:nth-child(2) {
/* 侧轴排列方式 */
align-self: center;
}
ul:nth-child(3) li:nth-child(3) {
align-self: flex-end;
margin: 5px;
}
/* 4点 */
ul:nth-child(4) {
justify-content: space-around;
/* 自动换行 */
flex-wrap: wrap;
}
ul:nth-child(4) li {
/* (90-20*2)/4 */
margin: 12.5px;
}
/* 5点 */
ul:nth-child(5) {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
ul:nth-child(5) li:nth-child(3) {
/* 20/2+(90-20)/2 */
margin: 0 35px;
}
/* 6点 */
ul:nth-child(6) {
justify-content: space-around;
flex-direction: column;
flex-wrap: wrap;
}
ul:nth-child(6) li {
margin: 5px 12.5px;
}
3.最终效果展示
