相关疑难解决方法(0)

我在容器中有一个未知数量的元素,需要在外部没有边距,但它们之间的边距最小.

我还需要这些是合理的,space-between最后一行左对齐.

我试图用flexbox这样做:

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div …

假设我有一个用户列表,每个用户都附加了一些号码.每个用户都列出如下:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的风格都是:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子:

好吧,这看起来很好,用户列表可以长得很长,所以紧凑在这里很重要.我的问题是,右边缘是非常不一致的,所以我想知道是否有任何方法可以改善这一点.

当然,我的第一个想法是在跨度上设置固定宽度.但是,用户名宽度不是完全可预测的.你可以打电话iiiii给某人打电话WWWWW但是因为这不是monospace字体,你会得到"iiiii"和"WWWWW",那里的宽度非常明显不同.所以"最大宽度"基本上是最宽的允许字符,即W乘以最大用户名长度.我们试试吧......

EW.我不妨使用一个<ul>如果这是我将得到的结果.接下来的想法可能是让display:table宽度在列之间保持一致,同时仍然保持动态并且 - 假设大多数人都有合理的用户名(*咳嗽*......哦,嘿,这就是你如何逃避Markdown ......呵呵...... .) - 但它确实往往会留下很多空的空间.

所以我目前的想法是某种合理的对齐.这对文本很有效,对吧？但是,唉,text-align: justify确实在这种情况下完全错误,可能是因为要素之间没有空格.

我最后的尝试是使用flexbox,我已经在网站的新设计中使用了一些效果.让我们看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外观......

嗯,这看起来不太糟糕.不太糟糕

......嗯.很近.我真正喜欢的是最后一行元素不会被拉伸到最终.没关系,最后一行有三个或四个,但两个看起来有点傻,只有一个填满整个宽度,看起来很荒谬.

所以我想这整个小冒险归结为一个简单的问题:

我如何实现类似于对齐的行为,其中元素间隔使用容器的整个宽度,除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事,感谢@ Michael_B的回答,这就是我如何实现解决方案:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果如下:

美丽.