弹性盒——利用弹性盒特性制作筛子

最新推荐文章于 2023-09-13 20:02:41 发布

小须美鱥

最新推荐文章于 2023-09-13 20:02:41 发布

阅读量480

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/Agress726901/article/details/129206762

版权

1.这个是最简单的，使用display:flex；将黑色的盒子变成弹性盒，然后用justify-content: center;控制小白球在主轴居中，再用align-items: center;控制小白球在侧轴居中就可以了。

2.第二个需要先使用justify-content: space-between;控制两个小球在主轴上两端对齐，然后再用align-self: flex-end;属性，控制右边的小白球移动到在侧轴结束的地方也就是右下角。

3.第三个第二个类似，首先用justify-content: space-between;将三个小白球在主轴上两端对齐，让后用align-self: center;控制中间的小白球移动到侧轴中间的地方。最后再用align-self: flex-end;属性控制右边的小球移动到在侧轴结束的地方。

4.从第四个开始我们就要换个思路去想了——有没有可能用两层弹性盒，就是黑色的盒子是第一层弹性盒，黑色的盒子里面还有两个盒子，每个盒子分别装两个小白球，弹性盒不会自动换行，为了使黑色盒子里的两个小弹性盒换行，（使用flex-wrap：wrap；进行换行），这样两个小弹性盒就从左右排列变成上下排列，然后再用align-self: flex-end;使两个小弹盒在侧轴上居中；最后再给两个小弹盒添加（justify-content: space-around;它的作用是均分剩余空间，使每个小白球左右两边的剩余空间一样多）这样就可以让两个小白球在在小弹性盒的主轴两端分布。

5.第五个是在第四个的基础上再添加一个弹性盒，在黑色的的盒子里放三个小弹性盒，三个小弹性盒里面分别放2-1-2个小白球，然后给黑色的大盒子添加display:flex；和flex-wrap：wrap；将黑色的大盒子变成弹性盒，并且让里面的三个小盒子换行分布为上，中，下三层。最后给三个小弹性盒添加justify-content: space-around;让两个小白球在在小弹性盒的主轴上均匀分布（就是均匀占有空余空间，当中间盒子里面只有一个小白球时，为了均分左右两边的空余空间，小白球就会居中）然后再给小弹性盒添加align-self: center;使小弹性盒在黑色的大弹性盒的侧轴居中靠拢就好了。

6.最后一个看起来很简答，做起来也不算难，只是有一点小麻烦。最后一个是在黑色的大盒子里套了两个小弹性盒，然后给黑色的大盒子添加justify-content: space-between;使两个小弹性盒在黑色的大盒子的主轴上分布到左右两端，然后给两个小弹性盒添加display: flex;变成弹性盒，再分别添加flex-wrap: wrap;和 align-items: center;让小弹性盒里面的小白球竖向排列并在侧轴上居中分布，此时小白球就在小弹性盒的左侧排列了，但是为了美观还要给左边的小弹性盒添加justify-content: flex-end;让里面的小白球在小弹性盒的右侧分布，到此就完成了。

        /* css */
        /* 1 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        li{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        }
        /* 2 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        li{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        } 
        li:nth-child(2){
            align-self: flex-end;
        }
        /* 3 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            justify-content: space-between;
        }
        li{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        } 
        li:nth-child(2){
            align-self: center;
        } 
        li:nth-child(3){
            align-self: flex-end;
        } 
        /* 4 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 20px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
        }
        ul{
            width: 160px;
            height: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        li{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        } 
        /* 5 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 20px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
        }
        ul{
            width: 160px;
            height: 33.33%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        li{
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        } 
        /* 6 */
        div{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 20px auto;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        ul{
            width: 30%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        ul:nth-child(1){
            justify-content: flex-end;
        }
        li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
        }
       <!-- html -->
       <!-- 1 -->
          <div><li></li></div>
       <!-- 2 -->
          <div>
            <li></li>
            <li></li>
          </div>
      <!-- 3 -->
          <div>
            <li></li>
            <li></li>
            <li></li>
          </div>
      <!-- 4 -->
          <div>
            <ul><li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
            </ul>
          </div>
     <!-- 5 -->
          <div>
            <ul>
               <li></li>
               <li></li>
            </ul>
            <ul>
               <li></li>
            </ul>
            <ul>
               <li></li>
               <li></li>
            </ul>
          </div>
     <!-- 6 -->
          <div>
            <ul>
               <li></li>
               <li></li>
               <li></li>
            </ul>
            <ul>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </div>