CSS Flexbox右对齐响应

Question

我正试图解决一个CSS flexbox问题：正确对齐框。

所以......我有4个div。其中两个需要左对齐，其余需要在右侧。我知道如何做到这一点，这不是问题（margin-left: auto 3日）。

但他们有财产flex-wrap: wrap因为我希望他们包裹在小屏幕上。我希望第3和第4个div在每个屏幕尺寸的右侧。我可以在第4天添加margin-left: auto，它会在第3和第4 div之间创建不需要的空间，但它适用于小屏幕（右边第3和第4次停留）。

我不想使用媒体查询，因为divs宽度是动态的...

那有什么好的解决方案吗？我不想在这里给opbox操作！

这是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>

好？