CSS Flexbox right align resonsive

Question

Существует одна проблема с flexbox из CSS, которую я пытаюсь решить: правильное выравнивание ящиков.

Итак, у меня есть 4 divs in row. Два из них должны быть выровнены влево, а остальные должны быть на правой стороне. Я знаю, как это сделать, и это не проблема (margin-left: auto на 3-ем).

Но у них есть свойство flex-wrap: wrap, потому что я хочу, чтобы они обернулись на маленьких экранах. Я хочу, чтобы 3-й и 4-й div были на правой стороне на каждом размере экрана. Я могу добавить margin-left: auto на 4-й, и это создаст нежелательное пространство между 3-м и 4-м диванами, но оно работает на маленьком экране (3-е и 4-е места справа).

Я не хочу использовать запросы средств массовой информации, потому что дивы ширина динамична ...

Есть ли хорошее решение для этого? Я не хочу давать op на flexbox здесь!

Здесь codepen: http://codepen.io/djkantoci/pen/XNxLVK

Красный с margin-left: auto, синий без:

Answer 1

Здесь добавлены justify-content: flex-end и margin-right: auto к .f2 элемент:

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

ОК?