Как спозиционировать элементы так, чтобы не было фиксированной ширины?

Question

[Александр Ситник]

Как позиционировать элементы так, чтобы не было фиксированной ширины? Т.е. чтобы не писать width: 50px, а чтобы решение было универсальным?
В макете вот так
У меня получается максимум вот так

Comments

[Rustam Bainazarov]

Родителю:
display: flex;
justify-content: space-between;

Детям:
flex: 1 1 auto;

Answer 1

[RAX7]

Answer 2

[dkrylov]

задавать width в % ( в Вашем случае это 100/3 = 33.3333334% на каждый блок)

Если элементы блочные (display:block), то добавить float: left;
Не забыть сделать что то вроде:

ul::after {
content: '';
display: block;
clear: both;
}

Чтобы float: left на элементы идущие после меню не распространялось

Comments

[Александр Ситник]

Так в том-то и дело, что в макете кнопки не одинаковой ширины. 1-ая длинна, 3-я маленькая

[dkrylov]

Александр Ситник, так задайте для первой и второй по 38% а для тертьей 24%.
Суть я думаю понятна)

[dkrylov]

Александр Ситник, вся фишка в width=% и float:left

[Александр Ситник]

Суть-то понятна, но мне кажется все равно, что такой способ не универсальный) Я вот в поиске решения, чтобы было автоматически. Вот как у меня в примере сделано через (text-align: justify), слова-то на место встают, а вот фоном залить не получается=\

[Rustam Bainazarov]

dkrylov, зачем float'ы?

[Rustam Bainazarov]

Александр Ситник, смотрите ответ RAX7.