@kroha3000

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

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

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

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

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

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

Вопрос, вроде, простой. Найти ответ не могу.
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
tpverstak.ru/flex-cheatsheet
Почувствуйте магию флекса
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@html-css
.container{
display:glex;
width:100%; //или нужная
}
.container div{
flex-grow: 1;
}


https://codepen.io/natojezlo/pen/XWbezqN
Ответ написан
@Firsov36
full-stack web developer
Проще всего сделать 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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы