如何在觸發 flex-wrap 時正確對齊，但在其他情況下對齊內容空間？

Question

我已經尋找答案，但我不確定如何用簡潔的方式寫出我的問題以找到答案。 到目前為止，我什么也沒發現。

情況如下：

在大屏幕上，我想要這樣：

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

我通過使用justify-content: space-between實現了這一點。

但是，當 window 縮小時，內容變為：

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 width: 100%; text-align: right但在大屏幕上，由於content A被推到右側，因此內容看起來居中。
• 我試過margin-left: auto ，它達到了相同的視覺效果：在小屏幕上工作，但content A看起來以大寬度為中心。
• 我試過align-items: flex-end; align-content: flex-end align-items: flex-end; align-content: flex-end但它什么也沒做。
• 我試過align-self: flex-end但它也沒有做任何事情。

有什么建議么？ 謝謝你。

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>