CSS：内联所有符合第一行的元素，在每个下一个元素之后换行

Question

没有javascript且没有屏幕宽度的媒体查询

我正在尝试找到一种 css-only 方式来实现下图所示的情况。我找不到创建以下内容的方法：

• 一行具有可变宽度的块（内联块或浮动块），使用float对齐到行的右侧：右或右文本对齐
• 不适合该行的元素，换行到下一行。第一行之后的所有元素都有自己的行。

我一直在尝试几种策略无济于事，我觉得flexbox可能会有所帮助，但我对flexbox不是很有经验，也找不到使用它的方法。

我尝试过的一些事情：

1. 尝试使用content：attr（data-content）将元素的内容放在：before伪元素中。元素本身没有宽度。在下一行中，将有一个宽度为99.9％的左浮动元素，它将每个元素推到下一行。这个问题是第一行的元素应该保持正常的宽度，我没有办法做到这一点。 ：第一行伪选择器仅限于行上的单词，不适用于行上的内联容器
2. 替代上述方法：还添加：在绝对定位的伪元素之后，其内容与：befores相同。 ：之前元素只显示在第一行而不包装，：after元素将形成右侧的垂直列表。也是这样，我走到了死胡同。

更新 当元素的宽度固定且相等时，我制作了一个（较少）小提琴。不幸的是固定宽度，所以还不是我想要实现的。如果你想帮助我，你可以用这个作为起点。我把内容放在：之前也许它可能溢出元素并以某种方式将元素宽度固定为auto。

目前仅限CHROME：http://jsfiddle.net/2px3b63j/7/

HTML：

<div class="pusher"></div>
<nav>
  <a data-title="First" href="#"></a><a data-title="Second" href="#"></a><a data-title="Third" href="#"></a><a data-title="Fourth" href="#"></a><a data-title="Fifth" href="#"></a>
</nav>

少：

@h: 3em;
@w:6em;
* {
  margin: 0;
  padding: 0;
}

body {
  font: 0.9rem sans-serif;
  background: #666;
}

.pusher {
  float: left;
  width: ~"calc(100% - " (@w * 1.01) ~")";
  height: @h * 6;
  -webkit-shape-outside: polygon(0 @h, 100% @h, 100% 100%, 0 100%);
}

nav {
  position: relative;
  text-align: right;
  background: white;
  height: @h;
  line-height:0;
  a {
    position: relative;
    text-align:center;
    width: @w;
    max-width: 100%;
    display: inline-block;
    background: white;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    height: @h;
    line-height: @h;
    &:before {
      content: attr(data-title);
    }
  }
}

链接到答案：https://jsfiddle.net/ky83870x/1/在Internet Explorer中不起作用，但我认为它适用于Edge。如果有人能找到一种方法让它在IE中运行，我将非常有兴趣知道

Answer 1

使用弹性框获得输出的一个可能性。

使Flexbox变得如此狭窄以至于任何孩子都适合。这迫使孩子们连续一人去。

在第一个子节点之前添加一个伪元素以强制额外的边距。

根据需要证明弹性

将弹性装置放在右侧，因为现在一切都在左侧。

元素采用颜色编码，以便轻松查看正在发生的事情

.container {
  display: flex;
  flex-flow: row wrap;
  border: solid 1px red;
  width: 10px;
  left: 500px;
  position: absolute;
  justify-content: flex-end;
}

.container div {
  font-size: 20px;
  margin: 5px;
  background-color: lightblue;
  display: inline-block;
  flex-basis: auto;
  flex-shrink: 0;
}

.container:before {
  content: "";
  margin-left: -500px;
  flex-basis: 10px;
  background-color: yellow;
  height: 6px;
}

<div class="container">
  <div>Lorem</div>
  <div>Ipsum dolor sit amet</div>
  <div>Consectetur adipisicing elit</div>
  <div>Unde saepe</div>
  <div>Placeat neque mollitia</div>
  <div>Accusamus fuga</div>
  <div>Lorem</div>
  <div>Ipsum dolor sit amet</div>
  <div>Consectetur adipisicing elit</div>
  <div>Unde saepe</div>
  <div>Placeat neque mollitia</div>
  <div>Accusamus fuga</div>
</div>