CSS Flexbox右对齐响应

Question

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

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

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

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

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

这是codepen：http://codepen.io/djkantoci/pen/XNxLVK

红色是margin-left: auto，蓝色没有：

Answer 1

此处，将justify-content: flex-end和margin-right: auto添加到.f2元素：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

OK？