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

Question

kroha3000 @kroha3000

CSS

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

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

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

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

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

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

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

Вопрос задан более трёх лет назад
3481 просмотр

Комментировать

Подписаться 1 Простой Комментировать

Answer 1 · 2020-03-05 14:28:03

Проще всего сделать 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

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

Войдите на сайт