Flexbox调整内容取决于孩子的数量

Question

有这个：

  <label>
    <button>Create</button>
  </label>

我希望按钮像这样右对齐

----------------------------
|                   [create]|
----------------------------

同时具有：

  <label>
    <button>Delete</button>
    <button>Update</button>
  </label>

我希望按钮在角落

----------------------------
|[delete]          [update]|
----------------------------

无需向标签添加其他类。

Answer 1

您可以使用margin-left: autoon last-child，这将产生所需的结果。

label {
  display: flex;
  border-bottom: 1px solid #aaa;
  margin: 20px 0;
}
label button:last-child {
  margin-left: auto;
}

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>

Answer 2

您可以只使用标准 Flexbox 属性来完成此操作：

• flex-direction: row-reverse- 将项目排成一行，从“末尾”开始（取决于阅读方向）
• justify-content: space-between- 将物品放置得尽可能远离彼此

label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>