Допустим, у меня есть список пользователей, и к каждому пользователю прикреплен какой-то номер. Каждый пользователь указан так:

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

Все они оформлены в:

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

Вот пример этого в действии:

Хорошо, все выглядит хорошо, список пользователей может быть довольно длинным, поэтому здесь важна компактность. Моя проблема в том, что этот правый край ужасно непоследователен, поэтому мне интересно, есть ли способ улучшить это.

Моя первая мысль была, конечно, просто установить фиксированную ширину на пролетах. Однако ширина имени пользователя не совсем предсказуема. Вы можете попросить кого-то позвонитьiiiii и кто-то звонилWWWWW но так как это не моноширинный шрифт, вы получаете «iiiii» и «WWWWW», там совершенно разные ширины. Таким образом, «максимальная ширина» в основном будет самым широким допустимым символом, которыйW, умноженный на максимальную длину имени пользователя. Давайте попробуем это ...

Еа. Я мог бы также использовать<ul> если это результат, который я собираюсь получить. Следующая мысль была, может быть, чем-тоdisplay:table иметь одинаковую ширину по столбцам, оставаясь при этом динамичной и - при условии, что у большинства людей есть разумные имена пользователей (* кашель * ... о, эй, вот как вы избегаете Markdown ... да ...) - но это имеет тенденцию в итоге еще много пустого места.

Так что моя текущая идея - это своего рода выравнивание по правде. Это хорошо работает для текста, верно? Но увы,text-align: justify в этом случае точно все глючит, возможно, потому, что между элементами, подлежащими обоснованию, нет пробелов.

Моя последняя попытка заключалась в использовании flexbox, который я уже использовал, чтобы добиться хорошего эффекта в новом дизайне сайта. Посмотрим, как это выглядитdisplay: flex; flex-wrap: wrap; на контейнере, иflex: 1 0 auto; на элементах ...

Да, это выглядит не так уж плохо. Не так уж плохо

... Хм. Так близко. То, что я действительно хотел бы, чтобы последняя строка элементов не растягивалась на всем протяжении. Это нормально, когда на последней строке три или четыре, но два выглядят немного глупо, и только один заполняет всю ширину и выглядит нелепо.

Так что, думаю, все это маленькое приключение сводится к одному простому вопросу:

Как можно добиться поведения, подобного justify-align, при котором элементы располагаются так, чтобы использовать всю ширину контейнера, кроме последней строки, где они должны использовать свою естественную ширину?

Чтобы завершить эту небольшую историю, благодаря ответу @ Michael_B, вот как я реализовал решение:

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

И результат:

Красивая.