高级 css flex 对齐和换行答案

【问题标题】：advanced css flex alignment and wrapping高级 css flex 对齐和换行
【发布时间】：2021-08-10 01:33:53
【问题描述】：

我想以一种非常奇特的方式对齐容器内的两个跨度。一个跨度应该左对齐，另一个右对齐，如下所示：

+---------------------+
|XXXXXXXXX   YYYYYYYYY|
+---------------------+

但是当涉及到重叠时，右对齐的文本应该放在一个额外的行中。像这样：

+--------------+
|XXXXXXXX      |
|       YYYYYYY|
+--------------+

然而，以下代码将第二个跨度向左对齐。

div {
  width: 40%; /* force narrow div to start with */
  display: flex; justify-content: space-between; flex-wrap: wrap;
}

<div>
  <span>left align some text</span>
  <span>right align some other text</span>
</div>

+-----------------------------+ /* yay */
|XXXXXXXXXXXXXX     YYYYYYYYYY|
+-----------------------------+

+--------------------+ /* nope */
|XXXXXXXXXXXXXX      |
|YYYYYYYYYY          |
+--------------------+

省略 flex wrap：

+--------------------+
|XXXXXXX       YYYYYY|
|XXXX            YYYY|
+--------------------+

我也试过

使用 float+clear 但这会导致容器高度为零
位置：绝对；对：0px 相对于容器不起作用！

有没有办法解决这个问题，而不需要明确地通过我的所有容器并通过 javascript 计算所有内容？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

而不是justify-content 使用auto 边距。

div {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
}

span:last-child {
  margin-left: auto;
}

<div>
  <span>left align some text</span>
  <span>right align some other text</span>
</div>

jsFiddle demo

Understanding flex auto margins.

【讨论】：

正是我需要的！谢谢！