html - 如何在触发 flex-wrap 时正确对齐，但在其他情况下对齐内容空间？

Question

我已经寻找答案，但我不确定如何用简洁的方式写出我的问题以找到答案。到目前为止，我什么也没发现。

情况如下：

在大屏幕上，我想要这样：

edge| [CONTENT A] ... space ... [CONTENT B] |edge

我已经通过使用justify-content: space-between.

但是，当窗口缩小时，内容变为：

edge| [CONTENT A] ... space ... |edge
edge| [CONTENT B] ... space ... |edge

（我正在使用flex-wrap: wrap）

但我想

edge| ... space ... [CONTENT A] |edge
edge| ... space ... [CONTENT B] |edge

• 我已经尝试过，width: 100% ; text-align: right但是在大屏幕上，内容看起来居中，因为content A它被推到了右边。
• 我已经尝试过margin-left: auto，它达到了相同的视觉效果：在小屏幕上工作，但content A在大宽度上看起来居中。
• 我试过align-items: flex-end; align-content: flex-end了，但它什么也没做。
• 我已经尝试过align-self: flex-end，但它也没有做任何事情。

有什么建议么 ？谢谢你。

标签： htmlcssflexbox

Answer 1

row-reverse wrap-reverse可以做到

.box {
  display:flex;
  justify-content:space-between;
  flex-flow: row-reverse wrap-reverse;
  /* OR
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
  */
  
  /* to illustrate */
  overflow:hidden;
  resize:horizontal;
  padding:10px;
  border:1px solid;
  /**/
}

.box > div {
  padding:10px 30px;
  border:1px solid blue;
} 

.box > div:first-child {
  order:1; /* to rectify the order swapped by row-reverse */
}

<div class="box">
<div>some text A</div>
<div>some text B</div>
</div>