CSS Flexbox水平グループ。ここに1つ、右

Question

を除いて左すべては私のHTMLです：

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

同じ主軸にそれを維持しながら、効果的にfloat: right;header > span要素をしながらどのように効果的にすべてのheader > divの要素を効果的float: left;を作るためにCSSのFlexを使うのですか？

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/