CSS:内联适合第一行的所有元素，每个下一个元素后换行

Question

没有 javascript 也没有屏幕宽度媒体查询

我正在尝试寻找一种仅使用 css 的方式来实现下图中描述的情况。我找不到创建以下内容的方法:

• 一行具有可变宽度的 block (内联 block 或 float block )，使用 float:right 或 right text align 对齐到行的右侧
• 不适合该行的元素换行到下一行。第一行之后的所有元素都有自己的行。

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

---

我尝试过的一些事情:

1. 尝试使用 content:attr(data-content) 将元素的内容放在 :before 伪元素中。元素本身没有宽度。在下一行，将有一个宽度为 99.9% 的左浮动元素，它将每个元素推到下一行。这样做的问题是第一行的元素应该保持它们的正常宽度，而我没有找到这样做的方法。 :first-line 伪选择器仅限于行内的单词，对行内的内联容器不起作用
2. 替代上述方法:同时添加:after 伪元素，这些伪元素是绝对定位的，并且与:befores 具有相同的内容。 :before 元素只会显示在第一行并且不会换行，:after 元素将在右侧形成垂直列表。也是这样，我走进了死胡同。

---

更新: 当元素的宽度固定且相等时，我制作了一个(较少的) fiddle 。不幸的是固定宽度，所以还不是我想要实现的。如果你想帮助我，你也许可以以此为起点。我将内容放在 :before 中，这样它可能会溢出元素并以某种方式将元素宽度固定为自动。

目前仅限 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 获取输出的一种可能性。

将 flexbox 缩小到任何 child 都能适应的程度。这迫使 children 一个接一个地去。

在第一个子元素之前添加一个伪元素以强制增加边距。

根据需要调整 flex

然后将 flex 放在右边，因为现在所有东西都在左边。

元素用颜色编码，可以很容易地看到发生了什么

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