移动端Flexbox布局：首列满宽其余项横向滚动实现需求

这问题我熟！要实现这种桌面端横向滚动、移动端首项独占一行其余项仍横向滚动的布局，核心思路是把首项和后续滚动项拆分成两个独立容器，完全不用纠结flex-wrap的限制，具体实现步骤如下：

1. 调整HTML结构 #

把原来的单个flex容器拆分为父容器+首项标签+滚动项容器，这样能分别控制不同视口下的排列方式：

<div class="plan-section">
  <!-- 首列标签 -->
  <div class="plan-label">Calendar Year Deductible...</div>
  <!-- 存放可横向滚动的项 -->
  <div class="scrollable-items">
    <div class="plan-item">$1,000</div>
    <div class="plan-item">$2,000</div>
    <div class="plan-item">$3,000</div>
    <div class="plan-item">$4,000</div>
    <div class="plan-item">$5,000</div>
  </div>
</div>

2. 基础CSS样式（桌面端） #

桌面端保持你原本的横向布局逻辑，首项固定宽度，滚动容器横向溢出滚动：

.plan-section {
  display: flex;
  gap: 1.25rem; /* 首项和滚动容器的间距 */
  align-items: flex-start;
}

.plan-label {
  flex-shrink: 0; /* 防止标签被压缩 */
  width: 220px; /* 你需要的固定宽度 */
  padding: 0.75rem;
}

.scrollable-items {
  display: flex;
  gap: 0.75rem; /* 滚动项之间的间距 */
  overflow-x: auto; /* 横向溢出时显示滚动条 */
  padding-bottom: 0.5rem; /* 给滚动条预留空间，避免挡住内容 */
  flex: 1; /* 让滚动容器占满剩余宽度 */
}

.plan-item {
  flex-shrink: 0; /* 防止滚动项被压缩 */
  width: 130px; /* 滚动项固定宽度 */
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
}

/* 可选：美化滚动条 */
.scrollable-items::-webkit-scrollbar {
  height: 6px;
}
.scrollable-items::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

3. 移动端媒体查询 #

在移动端视口下，把父容器改为纵向排列，让首项占满宽度，滚动容器保持横向滚动：

@media (max-width: 768px) {
  .plan-section {
    flex-direction: column;
    gap: 0.75rem;
  }

  .plan-label {
    width: 100%; /* 首项占满宽度 */
  }
}

为什么这个方案可行？ #

• 拆分容器后，我们不用再强制同一个flex容器既要横向排列又要换行，完全避开了flex-wrap的限制；
• 桌面端依然保持你想要的固定首项+横向滚动效果；
• 移动端首项独占一行，滚动容器独立保持横向滚动逻辑，完美匹配需求。

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