解决flex布局justify-content导致的多于元素对不齐问题

最新推荐文章于 2024-07-22 10:03:16 发布

@大熊

最新推荐文章于 2024-07-22 10:03:16 发布

阅读量1.2k

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_51558433/article/details/125668960

版权

笔记专栏收录该内容

28 篇文章

订阅专栏

当使用flex布局时，遇到justify-content导致的多于元素对不齐问题。本文提供两种解决方案：一是通过计算宽度设置margin-right实现对齐；二是利用额外元素补位，保持视觉上的均匀分布。详细解释了方法的原理，并指出在不同情况下添加的补位元素数量。

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

有以下场景

    <style>
      .wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 600px;
        background-color: #aff;
      }
      .item {
        width: 110px;
        height: 110px;
        background-color: #faa;
      }

    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>

    </div>
  </body>

效果如下
在这里插入图片描述
这样的样子很丑

解决方案

方法一

可以使用计算宽度来解决：假设容器的宽度是600px,每个项目的宽度是110px,每行可以显示5个，剩余宽度= 600px-110x50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin-right设置10px，最后一个不设置（div:nth-child(5n) {margin-right:0}）即可

方法二

部分代码

    <style>
      .wrapper > i {
        width: 110px; /*宽度要和每个项目的宽度一样*/
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <i></i><i></i><i></i>
    </div>
  </body>

原理

因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是高度是0，所以我们看不见，也不会影响布局，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3、4个的时候那么就剩下3、2、1个元素需要补位，正好我们添加了3个i元素.