如何使用Flex实现画廊每行显示3个元素并自动换行

嘿，我来帮你搞定这个Flexbox画廊的换行问题！

你的问题根源很明确：Flexbox容器默认是不自动换行的（默认属性flex-wrap: nowrap），所以所有子元素都会强行挤在同一行里。只需要给容器加两个关键属性，再调整子元素宽度就能完美实现需求。

步骤1：给容器开启换行功能 #

首先给.container设置基础的Flex布局，核心是加上flex-wrap: wrap来开启自动换行：

.container {
  display: flex;
  flex-wrap: wrap; /* 关键：空间不足时自动换行 */
  gap: 1rem; /* 可选：给元素之间加间距，让布局更美观 */
  padding: 1rem; /* 可选：给容器加内边距，避免元素贴边 */
}

步骤2：设置子元素宽度，实现每行3个 #

要让每行刚好容纳3个元素，给.inner设置宽度为33.33%左右。如果用了gap属性，记得用calc计算宽度来抵消间距的影响，避免出现换行错误：

.inner {
  /* 考虑gap的宽度计算：总间距是1rem，3个元素占2个间距，所以每个元素要减去2/3的gap */
  width: calc(33.333% - (1rem * 2 / 3));
  box-sizing: border-box; /* 关键：确保padding/border不会撑大元素宽度 */
  
  /* 可选样式，让画廊更直观 */
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 4px;
}

完整可运行示例代码 #

<div class="container">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing...</p>
  </div>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing...</p>
  </div>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing...</p>
  </div>
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing...</p>
  </div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.inner {
  width: calc(33.333% - (1rem * 2 / 3));
  background: #f0f0f0;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>

额外优化：响应式适配（可选） #

如果需要适配不同屏幕尺寸，可以加媒体查询，在小屏幕上自动调整每行显示的数量：

/* 平板屏幕：每行2个 */
@media (max-width: 768px) {
  .inner {
    width: calc(50% - 0.5rem);
  }
}

/* 手机屏幕：每行1个 */
@media (max-width: 480px) {
  .inner {
    width: 100%;
  }
}

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