高级CSS伸缩对齐和换行

Question

我想以一种非常特殊的方式对齐容器内的两个span。一个span应为左对齐，另一个应为右对齐，如下所示:

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

，但是当出现重叠时，右对齐的文本应该放在额外的行中。这样的:

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

下面的代码将第二个span对齐到左边。

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          |
+--------------------+

去掉软膜:

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

我也试过

• 使用float+clear，但这会导致容器高度为零
• :绝对;右:0px，相对于容器不起作用!

有没有一种方法来解决这个问题，没有明确地通过我所有的容器和计算一切通过javascript?

Answer 1

用auto代替justify-content

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演示了解自动页边距