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

Question

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

我试图找到一种仅用于css的方法来实现下图所示的情况.我找不到创建以下内容的方法:

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

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

---

我尝试过的一些事情:

1. 尝试将元素的内容放在:before伪元素中,使用content:attr(data-content).元素本身没有宽度.在下一行中,将有一个宽度为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

使用弹性盒获得输出的一种可能性。

将弹性盒设计得足够窄，以便任何孩子都能放进去。这迫使孩子们连续前进。

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

根据需要调整弯曲程度

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