Flex布局左对齐区块并保留间距，解决末行大空白问题

我想让区块左对齐，使用了flex的justify-content: space-between来自动分配间距，但最后一行只有2个区块时右侧出现巨大空白。请问如何在保留自动间距的前提下用flex实现需求？

问题截图：最后一行仅显示2个区块，右侧存在大量空白，前几行区块则均匀分布在容器内。

我的CSS代码 #

list-style-type: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

我的模板代码（Twig） #

{# LPs listing #}
<ul>
  {% for item in module.resources_block %}
  <li>
    <div class="lp-block">
      <div class="content-description">  
        <div>
         <span class="keyword">{% inline_text field="tag" value="{{ item.tag }}" %}</span>
        <h3>
          {% set href = item.link_field.url.href %}
          {% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
          {% set href = "mailto:" + href %}
          {% endif %}
          <a href="{{ href }}"
             {% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
             {% if item.link_field.rel %}rel="{{ item.link_field.rel }}"{% endif %}
             >
            {% inline_text field="title" value="{{ item.title }}" %}
          </a>
        </h3>
        {% inline_text field="description" value="{{ item.description }}" %}       
        </div>
        <div>
          {% set href = item.link_field.url.href %}
          {% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
          {% set href = "mailto:" + href %}
          {% endif %}
          <a class="{% if item.cta_text %}ghost-cta{% endif %}" href="{{ href }}"
             {% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
             {% if item.link_field.rel %}rel="{{ item.link_field.rel }}"{% endif %}
             >
            {% inline_text field="cta_text" value="{{ item.cta_text }}" %}
          </a> 
        </div>
      </div>
    </div>
  </li>
  {% endfor %}
</ul>
{# End LPs listing #}

解决方案 #

方法1：添加伪元素填充空白 #

给容器<ul>添加伪元素，让它占据最后一行的“虚拟区块”位置，迫使justify-content: space-between将最后一行的区块按正常间距排列，避免右侧空白：

ul {
  list-style-type: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 添加伪元素模拟空白区块 */
ul::after {
  content: "";
  /* 若区块为固定宽度，设置为和区块相同的宽度 */
  /* width: 300px; */
  /* 自适应宽度则用flex: auto */
  flex: auto;
}

如果你的.lp-block是固定宽度，将伪元素的width设为与区块一致，效果更精准；自适应宽度场景用flex: auto即可。

方法2：用gap替代justify-between（推荐） #

放弃justify-content: space-between，改用gap属性设置区块间的统一间距，同时保持justify-content: flex-start，这样所有区块自然左对齐，且间距均匀：

ul {
  list-style-type: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* 设置水平、垂直方向的区块间距，可单独设row-gap/column-gap */
  gap: 20px;
}

这种方法无需额外元素，是Flex布局中专门用于设置项目间距的标准方案，兼容性好且逻辑清晰。

方法3：JavaScript动态调整最后一行间距 #

若必须保留justify-content: space-between的布局逻辑，可通过JS计算并调整最后一行区块的margin：

const container = document.querySelector('ul');
const items = Array.from(container.querySelectorAll('li'));
if (!items.length) return;

const itemWidth = items[0].offsetWidth;
const containerWidth = container.offsetWidth;
const columnCount = Math.floor(containerWidth / itemWidth);
const lastRowItemCount = items.length % columnCount || columnCount;

if (lastRowItemCount < columnCount) {
  const marginRight = (containerWidth - lastRowItemCount * itemWidth) / lastRowItemCount;
  items.slice(-lastRowItemCount, -1).forEach(item => {
    item.style.marginRight = `${marginRight}px`;
  });
}

注意需要监听窗口resize事件，在容器宽度变化时重新计算，相对复杂，建议优先使用前两种CSS方案。

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