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 > spanfloat: right;

Answer 1

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

Answer 2

header
{
 display: flex;
}

header > div
{
 margin-right: auto;
}

header > span
{
 margin-left: auto;
}

https://jsfiddle.net/j5ffw1L7/