css flexbox调整内容

Question

我有一个用flexbox制作的单杠。

如果有2个或更多的项目，我希望每个项目尽可能分开，所以我设置证明-内容：空间-之间。

但是如果只有一个项目，我希望该项目放在末尾，因此我设置了justify content:flex end。

这些物品是从左到右排序的。因此，设置flex方向：row反向将不起作用。

我如何结合第一，第二

Answer 1

感谢@Paulie_D

这个想法是使用组合marginleft（或margininlinestart）和：第一个孩子：最后一个孩子（唯一的孩子）。

我花了几个小时来解决这个问题，但没有成功。现在开始工作了！

Answer 2

您可以使用选择下一个同级的来执行此操作。此方法使用justify content:flex end

.flex {
  display: flex;
  justify-content: flex-end;
  background: grey;
}

.item+.item {
  margin-left: auto;
}

.item {
  width: 10px;
  height: 10px;
  background: red;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">

  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

杠杆：独生子女

css lang-css prettyprint-override">.wrap {
  display: flex;
  margin-bottom: 1em;
  justify-content: space-between;
  width: 50%;
  border: 1px solid grey;
  padding: .25em;
}

.item {
  border: 1px solid red;
  padding: 1em;
  background: pink;
}

.item:only-child {
  margin-left: auto;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
</div>