CSS Flexbox布局：3列与2列交替排列实现求助

当然可以！这种交替的布局需求，用Flexbox结合CSS的:nth-child()选择器就能完美实现，核心思路是把3个元素+2个元素作为一个循环周期，然后分别给不同周期内的元素设置对应的宽度比例。

我给你准备了一个可直接运行的示例，代码里加了详细注释，你可以直接复制测试：

HTML结构 #

<div class="layout-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <!-- 可以继续添加更多item，布局会自动循环 -->
</div>

CSS样式 #

.layout-container {
  display: flex;
  flex-wrap: wrap; /* 让元素自动换行 */
  gap: 1rem; /* 元素之间的间距，可根据需求调整 */
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  /* 默认设置为3列布局：flex-grow:1 允许元素填充剩余空间，flex-basis:30% 是3列的基础宽度 */
  flex: 1 1 30%;
  background-color: #f0f0f0;
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 针对循环里的第4、5个元素（也就是2列的部分）调整宽度 */
/* 5n+4 表示第4、9、14...个元素；5n+5 表示第5、10、15...个元素 */
.layout-container .item:nth-child(5n+4),
.layout-container .item:nth-child(5n+5) {
  flex: 1 1 45%; /* 设置为2列的基础宽度 */
}

原理说明 #

• 我们把3个3列元素 + 2个2列元素作为一个循环周期（共5个元素），所以用5n+4和5n+5来精准定位每个周期里的后两个元素。
• flex: 1 1 [宽度]的写法是flex-grow、flex-shrink、flex-basis的简写，确保元素在容器尺寸变化时能自适应调整，同时保持我们想要的列数比例。
• 你可以根据实际需求调整gap、flex-basis的数值，或者修改元素的样式，让布局更贴合你的设计。

如果需要适配移动端，还可以加个媒体查询，在小屏幕上统一改成1列布局，比如：

@media (max-width: 768px) {
  .item,
  .layout-container .item:nth-child(5n+4),
  .layout-container .item:nth-child(5n+5) {
    flex: 1 1 100%;
  }
}

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