如何利用Flexbox在响应式单多行布局中调整取消按钮位置？

完全可以通过Flexbox结合媒体查询实现仅用一个按钮的需求，具体实现如下：

核心思路 #

• 小屏视口下：通过flex-wrap: wrap和flex-basis: 100%将输入项拆分为两行，同时让两行内容右对齐，确保按钮与第二行输入框的右侧边缘对齐。
• 大屏视口下：使用order属性调整元素排列顺序，并通过margin-left: auto将按钮固定在行尾。

代码实现 #

HTML

<fieldset>
  <div class="row-1">
    <input type="text" name="qty" placeholder="qty" />
    <input type="text" name="unit" placeholder="unit" />
  </div>
  <button type="button">CANCEL</button>
  <div class="row-2">
    <input type="text" name="item" placeholder="item" />
  </div>
</fieldset>

CSS

* {
  box-sizing: border-box;
}

/* 小屏视口基础样式 */
fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  border: 1px solid #ccc;
}

.row-1 {
  display: flex;
  gap: 4px;
}

.row-2 {
  flex-basis: 100%; /* 强制换行到第二行 */
  display: flex;
  justify-content: flex-end;
}

/* 控件宽度保持原设定 */
input[name="qty"] {
  width: 36px;
}

input[name="unit"] {
  width: 192px;
}

button {
  width: 72px;
}

input[name="item"] {
  width: 300px;
}

/* 大屏视口适配 */
@media screen and (min-width: 700px) {
  fieldset {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .row-1 {
    order: 1;
  }

  .row-2 {
    order: 2;
    flex-basis: auto;
    justify-content: flex-start;
  }

  button {
    order: 3;
    margin-left: auto; /* 将按钮推至行尾 */
  }
}

内容的提问来源于stack exchange，提问作者Jason T Szabo