Задать вопрос
turkish777
@turkish777
junior frontend
html

Как распределить блоки в флекс-контейнере?

Добрый день!
Надо распределить в флексбоксе 3 блока:
первый и третий по размеру, средний занимает все оставшееся место
Между блоками заданный в пикселях отступ!
хелп
  • Вопрос задан
  • 152 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
vadimkot
@vadimkot Куратор тега CSS
https://codepen.io/anon/pen/jKKmWB
Ответ написан
Комментировать
Комментировать
SagePtr
@SagePtr
Еда - это святое
Среднему добавить flex-grow: 1, остальным flex-grow: 0 (или не задавать, по умолчанию 0)
Ответ написан
Комментировать
Комментировать
monochromer
@monochromer
DIVeloper 
.box {
  flex: 0 0 auto;
}

  .box:nth-child(2) {
    flex: 1 1 0%;
  }

  .box + .box {
    margin-left: 1rem;
  }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать логотип
19 апр. 2024, в 14:10
500 руб./за проект
Разработка дизайна мобильного приложения которое управляет вентиляцией
19 апр. 2024, в 14:01
70000 руб./за проект
Софт на js
19 апр. 2024, в 13:31
10000 руб./за проект
Ещё заказы