Html CSS Flexbox右对齐响应

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

所以。。我一排有四个div。其中两个需要向左对齐，其余的需要在右侧对齐。我知道怎么做，这不是问题（

marginleft:auto

3号）

但是它们有属性

flex-wrap:wrap

，因为我希望它们在小屏幕上进行包装。我希望第三和第四分区在每个屏幕大小的右侧。我可以在第四节添加

左边距：auto

，它会在第三节和第四节之间创建不需要的空间，但它适用于小屏幕（第三节和第四节保持在右侧）

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

有什么好的解决办法吗？我不想在这里对flexbox发表评论

这是代码笔：

红色带左边框：自动，蓝色不带：

---

在此处，添加了

对正内容：柔性端

和

右边距：自动

到.f2元素：

.flex{
对齐项目：居中；
背景：ddd；
显示器：flex；
证明内容：柔性端；
柔性包装：包装；
边缘底部：20px；
填充物：5px；
}
.flex.small{
宽度：500px；
}
f{
背景：#333；
颜色：#fff；
flex:0自动；
保证金：5px；
最小高度：40px；
填充：30px 50px；
文本对齐：居中
}
.f2{
右边距：自动
}
.f3{
弹性基准：300px；
}

1.
2.
3.
4.
1.
2.
3.
4.

我不明白你的意思，伙计。。英雄联盟所以你需要4次跳水，1次和2次向左对齐，其他人向右对齐。问题是？你能把图片放在页面上吗？不要把我能在你的代码笔里看到的图像放进去。页面应该是第一个大灰色框，最后一个灰色框。问题出现在第二个框中，您可以在红色框中看到“否”，而在第三个框（小屏幕）中，您可以在蓝色框中看到“否”！我无法用真实的问题图像让它变得更简单，它可能会更令人困惑。。。相信我…TNX！我不知道为什么我没有想到这一点。我非常专注于右边：）欢迎！坚持使用一个属性或值是很常见的：）我现在在另一边发现了问题（我在codepen上更新了画笔）。。。当屏幕对于前两个div来说太小，并且它们收拢时，第一个div会与右侧对齐…：（flexbox应该真的有justify self属性…对于小屏幕，您可以使用以下小媒体查询：

.flex{flex direction:column；}

.f1{align self:flex start}

.f3，.f4{align self:flex end}是的……我知道我最终将不得不求助于媒体查询，我希望我只是忘记了一件事：）再次感谢！