CSS将一个项目与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;
}

Answer 1

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

从flex规范:

在主轴上使用自动边距是将弹性项目分成不同的"组".以下示例显示如何使用它来重现常见的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来实现类似的效果,这会将最后一个项目一直推到右侧.(演示)

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

演示

.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

对于简洁的纯弹性框选项,请将左对齐的项目和右对齐的项目分组:

<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

你可以做任何一个

margin-left: auto;

或者

position absolute;
right: 0px;

这会将项目移动到右侧。您给出的 px 值会将项目从右推到左。