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

无javascript和屏幕宽度媒体查询

我试图找到一个css唯一的方法来实现下图所示的情况。我找不到创建以下内容的方法：

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

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

---

我试过几件事：

尝试使用content:attr（数据内容）将元素的内容放在伪元素之前的：中。元素本身没有宽度。在下一行将有一个宽度为99.9%的左浮动元素，它将每个元素推到下一行。问题是第一行的元素应该保持其正常宽度，而我没有找到一种方法来做到这一点。：first-line伪选择器仅限于行中的单词，不适用于行中的内联容器

上述方法的替代方法：在伪元素之后添加：也就是绝对定位的伪元素，其内容与：befores相同。：before元素只显示在第一行，不换行，而：after元素将在右侧形成垂直列表。也就这样，我走进了死胡同

---

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

目前仅限CHROME：

html:

---

链接至答案：在Internet Explorer中不起作用，但我认为它在Edge中起作用。如果有人能找到一种方法让它在IE中工作，我将非常有兴趣知道使用flex box获得输出的一种可能性

使flexbox窄到任何儿童都能容纳。这迫使孩子们一排走一个

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

根据需要调整flex

然后把伸缩装置放在右边，因为现在所有的东西都在左边

元素采用颜色编码，便于查看发生了什么

.container{
显示器：flex；
柔性流：行换行；
边框：实心1px红色；
宽度：10px；
左：500px；
位置：绝对位置；
证明内容：柔性端；
}
.货柜组{
字体大小：20px；
保证金：5px；
背景颜色：浅蓝色；
显示：内联块；
弹性基础：自动；
弹性收缩：0；
}
.货柜：在{
内容：“；
左边距：-500px；
弹性基础：10px；
背景颜色：黄色；
高度：6px；
}

洛勒姆
Ipsum dolor sit amet
阿迪皮斯精英圣职酒店
圣普县
莫里蒂亚海滩酒店
富加Accusamus fuga
洛勒姆
Ipsum dolor sit amet
阿迪皮斯精英圣职酒店
圣普县
莫里蒂亚海滩酒店
富加Accusamus fuga

不，flexbox不能这样做。它可以包装，但是它不能把每个“下一个项目放在它自己的行上”Aziz，正如我所说的，并且在图片中显示，它们有一个可变的宽度我认为这是最好的，你可以用flexbox或者css Aziz，容器包含一个长度可以变化的单词，所以css不能对元素的宽度做出任何假设，据我所知，你认为我的问题无法解决。我将编辑的问题与尝试，我已经做了W的实际工作！这就是我一直在寻找的css黑客。非常感谢你。这是一个已编辑的小提琴，它使用整个屏幕宽度而不是500px:。在IE11中不起作用-顺便说一句，我想是因为很多IE flexbox问题。再次感谢您，通过将带负边距的左偏移设置为：before，可以确定父对象的“宽度”？这是一个不错的解决方案，但不确定是否足够灵活。到目前为止，唯一的问题是浏览器支持，即至少在版本11没有正确的FlexBoxElectronic实现之前，很高兴它有所帮助！我一直试图让它在IE中工作，但没有运气。。。

<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);
    }
  }
}