无需JS实现Flex容器：卡片未溢出居中，溢出后左对齐

可以不使用JavaScript实现需求，核心思路是利用flex的自动分配特性，结合伪元素模拟动态居中效果，同时保证溢出时滚动正常。

解决方案代码 #

.container{
  width: 100vw;
  padding: 10px 0;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  background: #bbb;
  display: flex;
  align-items: center;
  overflow-x: auto;
  gap: 8px;
  /* 移除原有的justify-content: center，改用伪元素实现动态居中 */
  justify-content: flex-start;
}

/* 左右伪元素，未溢出时平分剩余空间，将卡片组推至居中 */
.container::before,
.container::after {
  content: "";
  flex: 1 1 auto;
}

.container .card{
  padding: 5px;
  width: 100px;
  min-width: 100px;
  height: 70px;
  background: red;
}

<!-- 卡片数量少的情况 -->
<div class="container">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

<!-- 卡片数量多的情况 -->
<div class="container">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
  <div class="card">card 4</div>
  <div class="card">card 5</div>
  <div class="card">card 6</div>
  <div class="card">card 7</div>
  <div class="card">card 8</div>
  <div class="card">card 9</div>
  <div class="card">card 10</div>
  <div class="card">card 11</div>
  <div class="card">card 12</div>
</div>

原理说明 #

1. 未溢出时居中：当卡片总宽度小于容器宽度时，容器前后的伪元素会通过flex: 1 1 auto平分容器的剩余空间，自动将卡片组推到容器中间，实现和justify-content: center一致的居中效果。
2. 溢出时左对齐：当卡片总宽度超过容器宽度时，容器触发overflow-x: auto显示滚动条，此时伪元素的flex: 1不再生效（因为内容已经占满容器可用宽度），卡片组自动左对齐，滚动时可以完整看到所有卡片，不会出现首卡片被截断的问题。

额外优化 #

如果需要隐藏滚动条以优化轮播视觉体验，可以添加滚动条样式：

.container::-webkit-scrollbar {
  height: 0;
}

内容的提问来源于stack exchange，提问作者Demiro-FE-Architect