如何将一个项目与 flexbox 对齐？

Question

https://jsfiddle.net/vhem8scs/

是否可以让两个项目左对齐，一个项目右对齐 flexbox？链接显示得更清楚。最后一个例子是我想要实现的。

在 flexbox 中，我有一个代码块。使用 float 我有四个代码块。这就是我更喜欢 flexbox 的原因之一。

HTML

 <div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

 .wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

原文由 Jens Törnell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要将一个 flex 子项向右对齐，请将其设置为 margin-left: auto;

从 弹性规范：

主轴中自动边距的一种用途是将弹性项目分成不同的“组”。下面的示例展示了如何使用它来重现常见的 UI 模式 - 单个操作栏，其中一些在左侧对齐，而另一些在右侧对齐。

 .wrap div:last-child {
  margin-left: auto;
}

更新的小提琴

 .wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

 <div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

笔记：

您可以通过在中间的弹性项目（或简写 flex:1 ）上设置 flex-grow:1 来实现类似的效果，这会将最后一个项目一直推到右侧。 （ 演示）

然而，明显的区别是中间项目变得比它可能需要的更大。为弹性项目添加边框以查看差异。

演示

 .wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

 <div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议