CSS Flexbox水平分组;除一个右对齐外，其他都左对齐

Question

这是我的HTML代码：

<header>
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<span>123</span>
</header>

如何有效地使用CSS Flex使所有的header > div元素有效地float: left;同时使header > span元素有效地float: right;并保持在同一主轴上？

- John

---

你肯定知道这不是在这里提问的正确方式。 - Amit

浮点数和弹性布局是两个不同的概念。我们能否看一下你的代码，以便回答你？ - Relisora

尝试在该div上使用position:absolute; right:0; - Carol McKay

Answer 1

在“右” span 上使用 margin-left:auto。

header {
  display: flex;
  align-items: center;
  background: grey;
}
.set {
  height: 75px;
  flex: 0 0 50px;
  background: blue;
  margin: 1em;
}
.right {
  margin-left: auto;
  background: pink;
  padding: 1em;
}

<header>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <span class="right">123</span>
</header>

- Paulie_D

Answer 2

header
{
 display: flex;
}

header > div
{
 margin-right: auto;
}

header > span
{
 margin-left: auto;
}

https://jsfiddle.net/j5ffw1L7/

- John