Как сделать блоки в одну линию с заполнением растяжением на 100%?

Question

[kroha3000]

Как сделать блоки в одну линию?

Есть ннное количество блоков 2,3,4,5. и тд

Все находятся внутри одного контейнера.

Как сделать, чтобы блоки выстраивались все в одну линию и автоматически растягивались (в равной степени) на всю ширину блока?

inline-block работает только с фиксированным значением блоков.

Вопрос, вроде, простой. Найти ответ не могу.

Answer 1

[ThunderCat]

tpverstak.ru/flex-cheatsheet
Почувствуйте магию флекса

Comments

[kroha3000]

А без Flexbox возможна реализация?

[ThunderCat]

kroha3000, во первых - нахуа, если это просто и уже везде поддерживается? во вторых - ну, через яваскрипт, но это криво.

[kroha3000]

ок спасибо.

Лет 7 уже не верстал, и про флекс бокс знаком, но по привычке сомнения, но если используется повсеместно, то ок, спасибо!

[Sergey]

kroha3000, через float: left и width: 33% - но есть нюансы. Лучше воспользоваться все-равно флексом (посмотрите мой ответ) , т.к. можно будет блоки также выравнивать относительно других (одинаковый размер блоков по высоте/ширине) и другие удобства флексбокса. К тому же флекс уже поддерживается всеми современными браузерами, а совсем древние версии этих браузеров осталось пользователей - единицы для специальных нужд.

Answer 2

[html-css]

.container{
display:glex;
width:100%; //или нужная
}
.container div{
flex-grow: 1;
}

https://codepen.io/natojezlo/pen/XWbezqN

Comments

[ThunderCat]

display:glex; - это флекс+грид? )

[html-css]

ThunderCat,
:D
ахах ) получается, да

Answer 3

[Sergey]

Проще всего сделать flex'ом

<div class="parent">
  <div class="child">&nbsp;</div>
  <div class="child">&nbsp;</div>
  <div class="child">&nbsp;</div>
</div>

.parent {
  display: flex;
  justify-content: stretch;
  
  .child {
    flex:1;
    margin:2px 1px;
    
    border:1px solid #888;
    background: #ececec;
  }
}

Вот тут пример на codepen.io