如何在Flexbox项目换行时修改其样式？

我有一个两列Flexbox布局，第一个项目靠左对齐，第二个项目通过添加margin: auto实现剩余空间居中。代码如下：

HTML #

<div id="flexbox">
  <div id="item1">Flex item 1 with quite some content</div>
  <div id="item2">Flex item 2</div>
</div>

<button style="margin-top: 30px">Toggle shrink container</button>

CSS #

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px solid #397298;
}

#flexbox>div {
  background: #8bc6e3;
  padding: 20px;
}

#item2 {
  margin: auto;
}

JS（仅用于演示容器宽度变化，与问题无关） #

// Not relevant for the question - toggle container width
document.querySelector('button').addEventListener('click', () => {
  const flexbox = document.querySelector('#flexbox');
  if (flexbox.style.maxWidth) {
    flexbox.style.maxWidth = null;
  } else {
    flexbox.style.maxWidth = '300px';
  }
});

现在的核心问题：**当#item2换行时，如何移除它的margin: auto样式？**我希望它换行后靠左对齐，而非居中。

期望效果 #

• 未换行时：
  
• 换行时：
  

我在多个场景中都需要修改Flexbox项目换行时的样式，复杂响应式设计里写通用CSS规则难度很大。试过Grid布局，但也无法自定义换行后的项目样式，尽管换行会大幅改变页面布局和排列。我期待CSS容器查询能解决这类问题，但目前它的浏览器支持度还不够。

补充说明：按钮仅用于演示容器宽度变化，实际场景中项目换行是因为屏幕尺寸过窄，并非用户可通过JS捕获的操作。

解决方案 #

方法1：媒体查询（基于视口/容器宽度阈值）

如果能提前算出容器触发换行的宽度阈值，直接用媒体查询调整样式：

/* 假设容器宽度小于500px时触发换行，根据实际内容调整数值 */
@media (max-width: 500px) {
  #item2 {
    margin: 0; /* 移除auto margin，恢复左对齐 */
  }
}

优势是简单直接，缺点是硬编码阈值，内容变动时需要重新计算。

方法2：用Flex属性替代margin: auto

换一种布局实现方式，避免依赖margin: auto，让换行时自然左对齐：

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px solid #397298;
}

#flexbox>div {
  background: #8bc6e3;
  padding: 20px;
}

#item1 {
  flex: 0 1 auto; /* 保持自身内容宽度 */
}

#item2 {
  flex: 1 1 auto; /* 未换行时占据剩余空间 */
  text-align: center; /* 内容居中 */
}

/* 换行时取消剩余空间占据，恢复左对齐 */
@media (max-width: 500px) {
  #item2 {
    flex: 0 1 auto;
    text-align: left;
  }
}

通过flex属性控制项目宽度，既实现初始居中需求，换行时也能自然切换样式。

方法3：CSS容器查询（需浏览器支持）

如果目标浏览器支持容器查询（Chrome 105+、Firefox 110+等），这是最灵活的方案，直接基于容器自身尺寸判断：

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 2px solid #397298;
  container-type: inline-size; /* 声明容器为尺寸查询容器 */
}

#flexbox>div {
  background: #8bc6e3;
  padding: 20px;
}

#item2 {
  margin: auto;
}

/* 容器宽度小于500px时调整样式 */
@container (max-width: 500px) {
  #item2 {
    margin: 0;
  }
}

无需依赖页面视口，完全基于容器自身宽度触发样式变化，是适配复杂布局的最优解。

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