Как сделать так, чтобы два flex блока сжимались одинаково?
https://codepen.io/FragsterAt/pen/gOZBgjg
как сделать так, чтобы блоки 1 и 2 сжимались одинаково, до того момента, когда блок 1 упрется в размер содержимого, после этого чтобы сжимался только блок 2 до какого-то размера, потом появлялась вертикальная прокрутка?
сейчас получилось сделать так, чтобы только пропорционально высоте блоков 1 и 2 сжималось либо сжимается сначала блок 2, потом блок 1
Дополнительно:
Задать им одинаковый flex-basis. На самом деле не обязательно именно через basis, можно минимальной высотой или отступами.
Возможно, вам будет удобнее делать такие вещи гридами
сначала я добавил flex-1, который, вроде бы делает то же самое, но после этого лого стал сжиматься меньше своего размера. сейчас я понял, что это из-за того, что flex-1 еще и сжиматься разрешает.
указав basis-0 все заработало, спасибо!
Нужно у элементов 1 и 2 указать одинаковый flex-basis и при этом запретить сжиматься, например
flex: 1 0 0%
или по частям:
flex-grow: 1 flex-shrink: 0 flex-basis: 0% |
flex-grow: 1 flex-shrink: 0 flex-basis: 0%
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы два flex блока сжимались одинаково, необходимо использовать свойство flex-shrink с одинаковым значением для обоих блоков.
Пример кода на языке CSS:
.container { display: flex; } .item { flex: 1; flex-shrink: 1; /* устанавливаем одинаковое значение для обоих блоков */ }
В данном примере мы создали контейнер с помощью display: flex, где вложенные элементы будут выстраиваться в ряд. Затем каждому элементу задали flex: 1, чтобы они занимали одинаковое пространство по ширине.
Свойство flex-shrink позволяет указать, насколько элемент может уменьшаться по размеру относительно других элементов. Установив одинаковое значение для обоих элементов, мы гарантируем, что они будут сжиматься одинаково при уменьшении размера контейнера.
Таким образом, используя flex-shrink с одинаковым значением для обоих flex блоков, вы можете добиться одинакового сжатия элементов и создать более равномерный и красивый дизайн вашего сайта.