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

Question

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

在 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;
}

Answer 1

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

来自flex spec：

One use of auto margins in the main axis is to separate flex items into distinct "groups". The following example shows how to use this to reproduce a common UI pattern - a single bar of actions with some aligned on the left and others aligned on the right.

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

Updated fiddle

.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>

注：

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

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

Demo

.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>

Answer 2

对于简洁的纯 flexbox 选项，将左对齐项目和右对齐项目分组：

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

并使用 space-between:

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

这样您可以将多个项目分组到右侧（或仅分组）。

https://jsfiddle.net/c9mkewwv/3/

Answer 3

将一些元素 (headerElement) 居中对齐，最后一个元素向右对齐 (headerEnd)。

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}

Answer 4

这是我所做的（顺风但它只是 CSS）：

<nav class="border-b border-black flex">
  <div class="border border-red-600 w-12">Back</div>
  <div class="border border-blue-600 w-12">Logo</div>
  <div class="border border-green-600 flex-grow text-center">Socializus</div>
  <div class="border border-orange-600 w-24">
    <div class="w-12 ml-auto border border-pink-600">Menu</div>
  </div>
</nav>

思路是左右两部分宽度相同，那么右边的一个子部分就少了space

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

How can I align one item right with flexbox?

css

alignment

flexbox

Updated fiddle

Demo