如何将Flex容器内整行元素左移且保留自适应间距？

要达到你要的效果——让.item元素整行靠左，同时保留原space-evenly带来的元素间距，且适配容器宽度变化，可以按以下步骤操作：

1. 移除容器的均匀分布属性
   删掉.container里的justify-content: space-evenly;，此时flex容器默认会左对齐（等同于justify-content: flex-start;）。

2. 动态计算元素间距
   原space-evenly的元素间距计算公式是：(容器宽度 - 所有item总宽度) / (item数量 + 1)。我们可以用CSS变量结合calc()来实现这个动态间距，不用写固定值：

   .container {
     display: flex;
     /* 定义变量：根据你的实际item数量和宽度调整 */
     --item-count: 3;
     --single-item-width: 100px;
     --total-item-width: calc(var(--item-count) * var(--single-item-width));
     /* 计算出和space-evenly一致的元素间距 */
     --dynamic-gap: calc((100% - var(--total-item-width)) / (var(--item-count) + 1));
     /* 用gap设置元素间间距 */
     gap: var(--dynamic-gap);
   }
   

3. 适配动态item数量/宽度
   如果item数量或宽度是动态变化的，你可以通过JavaScript实时更新--item-count和--single-item-width这两个CSS变量，确保间距始终和容器宽度匹配。

这样调整后，item会紧贴容器左侧排列，同时元素间的间距和原来space-evenly时完全一致，而且能自动适配容器宽度的变化。

内容的提问来源于stack exchange，提问作者four-eyes