flex布局的一小部分

最新推荐文章于 2022-06-07 01:05:49 发布

BUG创建者

最新推荐文章于 2022-06-07 01:05:49 发布

阅读量682

点赞数

分类专栏：前端 html5

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

版权

前端同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

将盒子均匀的放在一个大盒子中
如图：
在这里插入图片描述
第一个方式很好实现，但是下面这一块的方式就是不太好实现

 <div class="divss">
    <div class="big">1</div>
    <div class="big">2</div>
    <div class="big">3</div>
    <div class="big">4</div>
    <div class="big">5</div>
    <div class="big">6</div>
    <div class="big">7</div>
    <div class="big">8</div>
    <div class="big">9</div>
    <div class="big">0</div>   
    <div class="big_empty" style="visibility: hidden"></div>
    <div class="big_empty" style="visibility: hidden"></div>
</div>

代码的结构根据big盒子的快读百分比来确定后面呢需要隐藏几个盒子
如果不加就是这样
在这里插入图片描述
不加的结构

样式

    .big{
         width: 15%;
   		 height: 100px;
         background: bisque;
       	 margin: 5px;
   		 border-radius: 8px;
   		 }
    .big_empty{
                     margin: 5px;
       				 width:15%;
       				 height: 0px; 
       	      }
    .divss{  
            width: 100%;
            height: 100%;    
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            flex-direction: row;
            flex-wrap: wrap; 
            }