Question

是否可以将两个项目左对齐，一个项目与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 spec：

在主轴上使用自动边距是为了分离弹性项目进入不同的＆＃34;组＆＃34;。以下示例显示了如何使用它重现一个常见的UI模式 - 一些动作与一些在左边对齐，其他在右边对齐。

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

Updated fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

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

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

Demo

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>  <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div>
＆＃13;
＆＃13;
＆＃13;

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

CSS将一个项目与flexbox对齐

3 个答案:

Updated fiddle

Demo