CSS Flexbox实现：元素换行时始终保持靠右布局

要实现你需要的布局，只需调整.form-group的CSS属性，让它既能在空间充足时保持行内布局，又能在空间不足时自动换行，同时避免占据多余宽度：

修改后的CSS代码 #

.wide {
  width: 400px;
}
.narrow {
  width: 250px;
  margin-left: 150px;
}
.wide, .narrow {
  border: dotted 1px purple;
}
.container {
  display: flex;
  align-items: center; /* 改为center让整体垂直居中更协调 */
}
.form-group {
  margin-left: auto;
  background-color: rgba(255, 235, 60, 0.15);
  /* 关键修改：行内flex容器+自动换行 */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em; /* 用gap替代margin，布局更均匀 */
}
.control-label {
  font-weight: bold;
  white-space: nowrap; /* 防止label被拆分换行 */
}
.form-control, button {
  height: 30px;
}
.button-container {
  margin-left: 0.5em; /* 给按钮和表单组加间距 */
}

对应的HTML代码（无需修改） #

<div class="wide">
  <form class="container">
    <div class="form-group">
      <label class="control-label">Language selector:</label>
      <select class="form-control">
        <option>Language name</option>
      </select>
    </div>
    <div class="button-container">
      <button type="submit">&gt;&gt;</button>
    </div>
  </form>
</div>
<br>
<div class="narrow">
  <form class="container">
    <div class="form-group">
      <label class="control-label">Language selector:</label>
      <select class="form-control">
        <option>Language name</option>
      </select>
    </div>
    <div class="button-container">
      <button type="submit">&gt;&gt;</button>
    </div>
  </form>
</div>

核心原理说明 #

1. .container的flex布局：保持display: flex，通过margin-left: auto让.form-group和按钮区块整体靠右对齐。
2. .form-group的inline-flex+flex-wrap：
   • inline-flex让表单组宽度由内部元素决定，不会撑满父容器，解决窄容器下占满空间的问题；
   • flex-wrap: wrap允许label和select在空间不足时自动换行，满足窄屏需求；
   • align-items: center确保内部元素垂直居中，替代原来的vertical-align更可靠。
3. white-space: nowrap给label：避免标签文本被拆分换行，保证可读性。
4. gap替代margin：让内部元素间距更均匀，无需单独设置每个元素的margin-right/margin-left。

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