如何解决flex布局的最后一行元素不靠左显示_flex 每行最后一个不要margin-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46787337/article/details/122005890

本文介绍了解决Flex布局中元素间距不均的问题，通过三种方法实现：调整最后一个元素的margin-right，使用填充元素来平衡间距，或者直接采用Grid布局解决这一难题。

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

示例

<div class="container">
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
  <div class="li"></div>
</div>

.container{
  display: flex;
  justify-content: space-between;
}

效果

在这里插入图片描述

解决思路

1.将最后一个元素的margin-right设置为margin-right:auto

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
  margin-right: auto;
}

2.使用height:0宽度与flex中子项一样宽的元素进行填充

 <div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="xxx" v-for="i in 6" :key="i"></div>
  </div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  >.list {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  }
  >.xxx{
  width: 100px;
  }
}