解决flex布局space-between最后一行布局问题超简单方法

如果flex布局justify-content设置为space-between、space-evenly或者space-around

并且最后一行与上面一行个数不同时,布局会裂开

 

 1个container父元素包裹了7个item子元素,1行想设置4个,最后一行的item不到4个,但想靠左

  1.  
    <div class="container">
  2.  
    <div class="item item1">1</div>
  3.  
    <div class="item item1">2</div>
  4.  
    <div class="item item1">3</div>
  5.  
    <div class="item item1">4</div>
  6.  
    <div class="item item1">5</div>
  7.  
    <div class="item item1">6</div>
  8.  
    <div class="item item1">7</div>
  9.  
    </div>

  1.  
    .container {
  2.  
    width: 700px;
  3.  
    background-color: orange;
  4.  
    display: flex;
  5.  
    flex-wrap: wrap; //换行
  6.  
    justify-content: space-between;
  7.  
    }
  8.  
     
  9.  
    .item {
  10.  
    width: 150px;
  11.  
    height: 150px;
  12.  
    margin-bottom: 10px;
  13.  
    background-color: green;
  14.  
    }

如果一行想添加的子元素item为n

那么在最后一行加入(n-2)个span,再给span添加宽度即可

  1.  
    <div class="container">
  2.  
    <div class="item item1">1</div>
  3.  
    <div class="item item1">2</div>
  4.  
    <div class="item item1">3</div>
  5.  
    <div class="item item1">4</div>
  6.  
    <div class="item item1">5</div>
  7.  
    <div class="item item1">6</div>
  8.  
    <div class="item item1">7</div>
  9.  
    <span></span>
  10.  
    <span></span>
  11.  
    </div>

  1.  
    .container {
  2.  
    width: 700px;
  3.  
    background-color: orange;
  4.  
    display: flex;
  5.  
    flex-wrap: wrap;
  6.  
    justify-content: space-between
  7.  
    }
  8.  
     
  9.  
    .item {
  10.  
    width: 150px;
  11.  
    height: 150px;
  12.  
    margin-bottom: 10px;
  13.  
    background-color: green;
  14.  
    }
  15.  
     
  16.  
    .container span {
  17.  
    width: 150px;
  18.  
    }

为什么要设置n-2个span?

拿上面的例子来说,一行需要4个子元素。

  • 只有1个元素的时候,会靠左排列。
  • 有4个元素的时候,就不需要关心这个问题了。

所以去除掉这两种情况。

 justify-content:space-between在最后一行只有一个元素的时候,那个元素默认是靠左排布的;如果最后一行拥有与上面行相同的元素数量,最后一行的排布就与上面行的排布相同。上面两种情况不需要添加span元素,于是需要添加span的就剩下了n-2个。

在本文的例子中,最后一行如果是2个item,添加两个span刚好能够补充空位;如果是3个item的话,一个补充在最后一个空位上,另外一个补充在下一行,但是span是没有设置高度的,不会进行展示

 

posted on   漫思  阅读(624)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
历史上的今天:
2018-01-31 有关datatables的非常规教程

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示