如何调整Flex布局下每行3个帖子的间距为指定比例？

当前页面每行展示3个帖子，我想把帖子间的间距设置为自定义比例（比如对应图中红色虚线标记的20%占比距离），而非现在蓝色箭头所示的间距。样式控制应该在.container或.post类里，但不知道具体修改方式。

相关代码 #

CSS代码 #

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

.post {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 40px;
  width: calc(33.33% - 20px); /* 3 posts per row */
  background-color: #fff;
  transition: background-color 0.3s, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: auto;
}

.post:hover {
  transform: translateY(-5px);
  background-color: #f8f8f8;
}

.post:active {
  transform: translateY(0);
  background-color: #fff;
}

.anime-image {
  width: 100%;
  height: auto;
  flex-shrink: 0; /* Prevent image from shrinking */
}

.anime-details {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.rating {
  font-weight: bold;
  font-size: 14px;
}

HTML代码 #

<div class="container">
@foreach (var anime in Model.Animes)
{
  <div class="post">
    <a href="url">
      <div class="anime-image-container">
        <img class="anime-image" src="@anime.Image">
      </div>
    </a>
    <div class="anime-details">
      <p class="title">@anime.Title</p>
      <p class="rating">Рейтинг</p>
    </div>
  </div>
}
</div>

解决方案 #

要实现按比例控制帖子间距，核心是调整Flex布局的间距分配逻辑，以下是两种可行方法：

方法1：使用gap属性（推荐） #

直接给.container设置百分比的gap，浏览器会自动处理间距分配，无需手动调整最后一个元素的边距：

.container {
  display: flex;
  flex-wrap: wrap;
  /* 横向间距设为容器宽度的10%，每行3个帖子共2个间距，总间距占20% */
  gap: 0 10%; 
}

.post {
  /* 帖子宽度 = (容器总宽度 - 总间距) / 帖子数量 */
  width: calc((100% - 20%) / 3);
  /* 保留原有其他样式 */
}

如果需要单个间距占比20%，则总间距为40%，帖子宽度改为calc((100% - 40%) / 3)，可根据视觉需求灵活调整百分比。

方法2：通过margin手动控制（兼容旧浏览器） #

若需兼容不支持gap的旧浏览器，可通过margin结合伪类处理：

.container {
  display: flex;
  flex-wrap: wrap;
  /* 移除原有的justify-content: space-between */
}

.post {
  width: calc((100% - 40%) / 3); /* 2个间距各占20%，总间距40% */
  margin-right: 20%;
  margin-bottom: 40px;
}

/* 每行最后一个帖子去掉右侧边距，避免超出容器 */
.post:nth-child(3n) {
  margin-right: 0;
}

注意事项 #

• 百分比间距基于.container的宽度计算，确保容器已占满父容器宽度或有明确宽度值。
• 使用gap属性的方式更简洁，无需额外处理边距溢出问题，优先推荐。

内容的提问来源于stack exchange，提问作者Alex