flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案-CSDN博客

本文链接：https://blog.csdn.net/qq_45846359/article/details/117465169

本文介绍了在CSS flex布局中，使用justify-content:space-between时遇到两个元素间出现空隙的问题。通过分析和示例代码，提出了解决这种布局样式不符合预期的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在用flex布局的时候有时会用到justify-content:space-between属性，这个属性是让弹性容器内的元素向两端对齐。

    <div class="box">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>

     .box {
           width: 1000px;
           height: 700px;
           background-color: #999;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           align-items: center;
       }

       .box div {
           width: 195px;
           height: 100px;
           background-color: aqua;
       }

这是上面代码实现的效果
在这里插入图片描述

但是我使用justify-content:space-between属性之后想要成这种效果怎么办呢？
在这里插入图片描述

可以这样写

     <div class="content">
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        
        <!-- 一行需要几个元素就写几个下面的标签 -->
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
    </div>

     .content{
           width: 1000px;
           height: 700px;
           background-color: #999;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           align-items: center;
       }

       .content .box  {
           width: 195px;
           height: 100px;
           background-color: aqua;
       }