相关疑难解决方法(0)

我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.

这是我的一个例子:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

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

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

结果如下:

美丽.