浮动在弹性盒（或等效物）内

Question

float: right

在弹性盒内不起作用。 （它不能正确浮动，也不能跨越几行。）

请告知如何实现对应于包含跨多行的大型浮动的弹性框的布局。它不一定是 Flexbox，但理想情况下它不应该太老套（例如在

<canvas>

上绘画）。

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.container span {
  flex: auto;
  background-color: gray;
}
.container .float {
  float: right;
  background-color: yellow;
}
* {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

<div class="container">flexbox
  <span class="float">multiline<br>float</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
  <span>element with much content</span>
</div>

Answer 1

我想知道是否有更好的解决方案，但这是我当前的解决方案：

可以通过使用

text-align: justify

而不是 Flexbox 来实现该布局。

为了使灰色

<span>

元素之间的白色间隙在所有行中具有相同的宽度，我使用技巧来避免由

text-align: justify

引起的扩展。

（在这个技巧之前，我曾尝试将

justify-self: stretch

添加到子元素中，但如果父元素

<div>

有

display: block

则没有效果。我又尝试了父元素

display

的所有可能的

<div>

值，但都没有达到预期的结果。）

.container {
  text-align: justify;
}
.container span {
  white-space: nowrap;
  background-color: gray;
}
.container .float {
  float: right;
  background-color: yellow;
}
* {
  border: 1px solid black;
  margin: 1px;
  padding: 1px;
}

<div class="container">justified div
  <span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span class="float">multiline<br>float</span><span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>no line breaks</span>&#x2005;<span>no line breaks</span>&#x2005;<span>no line breaks</span>&#x2005;<span>no line breaks</span>&#x2005;<span>no line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>&#x2005;<span>span with suppressed line breaks</span>
</div>

user-select: none

可以阻止选择

 

字符，但是这些字符应该用

<span>

包裹在自己的

user-select: none

中（可以更方便地设置其宽度），因为似乎将

user-select: none

设置为父级不能被其他子级覆盖。