CSS Flexbox 右对齐响应式

Posted 2023-03-07

【中文标题】CSS Flexbox 右对齐响应式

【英文标题】：CSS Flexbox right align responsive

【发布时间】：2017-04-30 18:59:56

【问题描述】：

我正在尝试解决一个 CSS flexbox 问题：盒子的右对齐。

所以.. 我一排有 4 个 div。其中两个需要向左对齐，其余的需要在右侧。我知道该怎么做，这不是问题（margin-left: auto 3rd）。

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

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

有什么好的解决方案吗？我不想在这里对 flexbox 进行操作！

这里是代码笔：http://codepen.io/djkantoci/pen/XNxLVK

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

【问题讨论】：

我不明白你的意思.. 大声笑.. 所以你想要 4 次潜水，1 和 2 向左对齐，其他的向右对齐。问题是什么？你能放一张图片应该是什么页面吗？不要在您的代码笔中放置我可以看到的图像。

页面应该是第一个大灰色框，这里是这张图片上的最后一个灰色框。问题出在第二个方框中，您可以在红色方框中看到“NO”，在第三个方框（小屏幕）中，您可以在蓝色方框中看到“NO”！我不能用真正的问题图像让它更简单，它可能会更令人困惑......相信我......

【参考方案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>

好吗？

【讨论】：

TNX！我不知道为什么我没有想到这一点。我非常关注右侧:)

欢迎您！坚持一个属性或值是很常见的:)

我现在在另一边发现了问题（我在 codepen 上更新了笔）...当屏幕对于前两个 div 太小并且它们结束时，第一个与对... :( flexbox 应该真的有 justify-self 属性...

对于那个小屏幕，你可以使用这个小媒体查询：.flex flex-direction: column;.f1 align-self: flex-start.f3, .f4 align-self: flex-end

是的...我知道我最终将不得不进行媒体查询，我希望我只是忘记了一些事情 :) 再次感谢！