flex布局的一小部分

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

 <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; 
            }  

猜你喜欢

转载自blog.csdn.net/wzwzwz555/article/details/107332420