Как сверстать такие блоки на flexbox?
Как сверстать такие блоки на flexbox, чтобы при переполнении контентом в блоках Б и В, блок А подстраивался по высоте.
Блок А слайдер и у него всегда есть max-height, который задается из настроек модуля.
Также хотелось бы чтобы блок Б и В были одинаковые по высоте по отношению друг к другу. height: 50% не работает.
Дополнительно:
На флексах, без JS - никак.
Используйте гриды
можно и js если предложите решение
Так получаете высоту блоков, вычисляете как вам нужно и подставляете.
Но зачем это делать на js, если есть гриды?
Вы уже 82 вопроса задали и, наверное, уже давно хорошо знаете, что нужно показывать свой код, по возможности в песочнице типа codepen.io
Две колонки, две строки. Всё по 1fr.
Любите вы фигнёй заниматься...
Используйте гриды.
snippet
-
Любите вы фигнёй заниматься...
Ага )
Ответы:
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;
}
- оформите ответ нормально
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
// Еще один блок с PHP кодом $age = 30; echo "Age: $age years old"; |
// Еще один блок с PHP кодом $age = 30; echo "Age: $age years old";
```
Таким образом, блоки с кодом будут выровнены вертикально с помощью flexbox и будут иметь стандартный стиль для удобного отображения программного кода. Не забудьте заменить "PHP" на нужный язык программирования в теге
, если вы используете другие языки помимо PHP.
Для создания блоков с кодом на языках программирования с использованием тега
и стилизацией через flexbox, вам нужно выполнить следующие шаги: 1. Создайте контейнер, который будет содержать все блоки с кодом. Назовем его, например, "code-container". 2. Для каждого блока с кодом создайте отдельный элемент, например, "code-block". 3. Для стилизации блоков с кодом используйте следующие CSS правила: ```css .code-container { display: flex; flex-direction: column; gap: 10px; /* расстояние между блоками с кодом */ } .code-block { background-color: #f4f4f4; /* цвет фона блока с кодом */ border: 1px solid #ccc; /* граница блока с кодом */ padding: 10px; /* отступ внутри блока с кодом */ overflow: auto; /* добавляет полосы прокрутки, если содержимое блока не помещается */ } ``` 4. Для использования тега <pre lang="php"> в HTML коде, примерно так будет выглядеть ваш код: ```html <div class="code-container"> <div class="code-block"> <pre lang="php"> // Ваш PHP код здесь $name = "John"; echo "Hello, $name!";