Flexbox justify-content 取决于子项的数量

Posted 2023-03-06

【中文标题】Flexbox justify-content 取决于子项的数量

【英文标题】：Flexbox justify-content depending on number of children

【发布时间】：2017-03-19 21:10:12

【问题描述】：

有这个：

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

我希望按钮像这样向右对齐

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

虽然有这个：

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

我希望按钮在角落里

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

无需向标签添加额外的类。

【问题讨论】：

@NenadVracar 提供了一个完美的答案 IMO。如果您想了解其工作原理，请参见此处：***.com/q/32551291/3597276

【参考方案1】：

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

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>

【参考方案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>

【讨论】：

我知道这是可能的！

【参考方案3】：

您可以使用 CSS Flexbox justify-content 属性来对齐您的元素。

看看这个Codepen。

或者查看下面的代码以供参考，我也使用<div>s 代替<label>，就像在.two 中一样，它们都作用于两个按钮。

div 
  display: flex;
  background: #ddd;
  padding: 10px 20px;
  margin-bottom: 10px;


div:first-child 
  justify-content: flex-end;


div:nth-child(2) 
  justify-content: space-between;

<div>
  <button>Create</button>
</div>

<div>
  <button>Delete</button>
  <button>Update</button>
</div>

了解更多关于CSS Flexbox

希望这会有所帮助！

【讨论】：

“不向标签添加额外的类。”

@IlyaNovojilov 哦！我的错，我已经更新了我的答案。请看一看。