CSS Flexboxの右揃えresonsive

Question

私が解決しようとしているCSSフレックスボックスの問題が1つあります。

私は4つのdivを連続しています。それらのうちの2つは左に整列する必要があり、残りは右側に配置する必要があります。私はこれを行う方法を知っており、これは問題ではありません（margin-left: auto、第3位）。

しかし、彼らは小さな画面でラップしたいので、属性はflex-wrap: wrapです。 3番目と4番目のdivがすべての画面サイズの右側に表示されます。私はmargin-left: autoを4番目に追加することができます.3番目と4番目のdivの間に不要なスペースを作成しますが、それは小さな画面（3番目と4番目の右側にあります）で動作します。

私は

が、そのためにどんな素敵な解決策はあり... divの幅が動的であるため、メディアクエリを使用したくありませんか？私はここにフレックスボックスのオペレーションをしたくない！ここ

Answer 1

要素.f2するjustify-content: flex-endとmargin-right: autoを追加：青なしで、http://codepen.io/djkantoci/pen/XNxLVK

レッドmargin-left: autoである：ここ

はcodepenさ

.flex { 
 
    align-items: center; 
 
    background: #ddd; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-wrap: wrap; 
 
    margin-bottom: 20px; 
 
    padding: 5px; 
 
} 
 
.flex.small { 
 
    width: 500px; 
 
} 
 

 
.f { 
 
    background: #333; 
 
    color: #fff; 
 
    flex: 0 0 auto; 
 
    margin: 5px; 
 
    min-height: 40px; 
 
    padding: 30px 50px; 
 
    text-align: center 
 
} 
 
.f2 { 
 
    margin-right: auto 
 
} 
 
.f3 { 
 
    flex-basis: 300px; 
 
}

<div class="flex"> 
 
    <div class="f f1">1</div> 
 
    <div class="f f2">2</div> 
 
    <div class="f f3">3</div> 
 
    <div class="f f4">4</div> 
 
</div> 
 

 
<div class="flex small"> 
 
    <div class="f f1">1</div> 
 
    <div class="f f2">2</div> 
 
    <div class="f f3">3</div> 
 
    <div class="f f4">4</div> 
 
</div>

を

OK？