@Minusator

Как сверстать такие блоки на flexbox?

Как сверстать такие блоки на flexbox, чтобы при переполнении контентом в блоках Б и В, блок А подстраивался по высоте.
Блок А слайдер и у него всегда есть max-height, который задается из настроек модуля.
Также хотелось бы чтобы блок Б и В были одинаковые по высоте по отношению друг к другу. height: 50% не работает.

6574187731b4b060003428.jpeg
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Любите вы фигнёй заниматься...
Используйте гриды.

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@woidead
html


БЛОК A
БЛОК B
БЛОК C

css

.container {
display: flex;
flex-wrap: wrap;
}

.block {
display: flex;
align-items: center;
justify-content: center;
margin: 5px; /* Просто для отступа, можно настроить как угодно */
}

.block-a {
flex: 1; /* Растягиваем на всю ширину, если один в строке */
max-height: 200px; /* Пример максимальной высоты */
background-color: gray;
}

.block-b,
.block-c {
flex-basis: 100%; /* Занимает всю ширину */
flex-grow: 1; /* Растягивается на доступное пространство по высоте */
}

.block-b {
background-color: red;
}

.block-c {
background-color: green;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 февр. 2024, в 19:21
300 руб./за проект
28 февр. 2024, в 19:10
2000 руб./за проект
28 февр. 2024, в 19:09
35000 руб./за проект