flex布局一行n个

最新推荐文章于 2024-07-25 09:24:40 发布

BUG创建者

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量122

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/wzwzwz555/article/details/134943617

版权

上图
在这里插入图片描述
缩小后

主要用了 flex-basis flex-grow flex-shrink flex的三个属性有兴趣的可以看看
深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解

 .bg{
      background-color: aquamarine;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .box1{
      background-color: azure;
      height: 200px;
      /* 11   就是n   注意margin 右 5px   所以就是（n-1）*5   这里n=11  所以计算出来就是50     */
      margin: 0 5px 5px 0;
      flex: 0 0 calc((100% - 50px)/11); 
    }
    .box1:nth-child(11n) {
          margin-right: 0;
      }