Как изменить размеры flex-элемента без изменения положения соседних блоков?
Друзья, всех приветствую!
Застрял на такой задаче: нужно сверстать сетку с карточками товаров. При наведении на один из товаров (.item:hover), один из его дочерних элементов становится видимым, и, соответственно, высота .item увеличивается. Но при этом новый, увеличенный item должен перекрывать соседние, влиять на их положение он не должен.
<div class="container"> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> |
<div class="container"> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> <div class="item"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div>
.container { max-width: 800px; padding: 10px; margin: 0 auto; border: 2px solid #000; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: 25px; } .item { border: 1px solid red; text-align: center; flex: 0 1 240px; box-sizing: border-box; } .item div { padding: 20px; } .hidden-block { display: none; } .item:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);} .item:hover .hidden-block { display: block; } |
.container { max-width: 800px; padding: 10px; margin: 0 auto; border: 2px solid #000; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: 25px; } .item { border: 1px solid red; text-align: center; flex: 0 1 240px; box-sizing: border-box; } .item div { padding: 20px; } .hidden-block { display: none; } .item:hover {box-shadow: 0 0 10px rgba(0,0,0,0.5);} .item:hover .hidden-block { display: block; }
Как реализовать это дело таким образом, чтобы положение соседних элементов при этом не менялось?
Пример: отображение товаров на wb, прикрепляю скриншот (на третий товар в первом ряду наведен курсор, и его содержимое накладывается на соседние элементы):
Пробовал добавлять внутрь .item дополнительный див .wrapper. Item'у добавлял position: relative, а wrapper'у absolute. Но т.к. relative ориентируется на исходные размеры элемента, не получается добавить тень и т.д.
В голову приходит только изменение размеров при помощи JS, но почему-то мне кажется, что должен быть более простой способ :) Может кто-нибудь подскажет, как реализовать? Буду очень благодарен.
Дополнительно:
плохо пробовал через absolute
не получается добавить тень и т.д.
Отсюда вывод: не тому тень.
Пример: отображение товаров на wb
В голову приходит только изменение размеров при помощи JS
Да, на WB так и сделано.
Только размер как раз таки меняться не должен ;) Это содержимое должно вывалиться.
https://codepen.io/rainbrew/pen/OJaqEOy
<div class="container"> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> </div> |
<div class="container"> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> <div class="item"> <div class="item-wrapper"> <div class="visible-block"> Какой-то контент, который виден по умолчанию </div> <div class="hidden-block"> Контент, который появляется при наведении мыши на item </div> </div> </div> </div>
.container { max-width: 800px; padding: 10px; margin: 0 auto; border: 2px solid #000; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: 25px; } .item { text-align: center; flex: 0 1 240px; box-sizing: border-box; position: relative; } .item .item-wrapper { border: 1px solid red; background: #fff; } .item:hover .item-wrapper { position: absolute; top: 0; left: 0; box-shadow: 0 0 10px rgba(0,0,0,0.5); min-height: 100px; z-index: 2; } .item:hover .hidden-block { display: block; padding: 0 20px 20px 20px; } .item .visible-block { padding: 20px; } .hidden-block { display: none; } |
.container { max-width: 800px; padding: 10px; margin: 0 auto; border: 2px solid #000; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: 25px; } .item { text-align: center; flex: 0 1 240px; box-sizing: border-box; position: relative; } .item .item-wrapper { border: 1px solid red; background: #fff; } .item:hover .item-wrapper { position: absolute; top: 0; left: 0; box-shadow: 0 0 10px rgba(0,0,0,0.5); min-height: 100px; z-index: 2; } .item:hover .hidden-block { display: block; padding: 0 20px 20px 20px; } .item .visible-block { padding: 20px; } .hidden-block { display: none; }
- Огромное спасибо! За рабочее решение и за то, что потратили свое время
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения размеров flex-элемента без изменения положения соседних блоков, можно использовать свойства flex-grow, flex-shrink и flex-basis.
Прежде всего, убедитесь, что ваш flex-контейнер имеет свойство display: flex или display: inline-flex, чтобы установить контейнер в режим гибкого макета.
Для изменения размеров flex-элемента можно использовать свойство flex-grow. Оно определяет, насколько элемент может увеличиться по сравнению с другими flex-элементами внутри контейнера. Например, если установить flex-grow: 2 для одного элемента и flex-grow: 1 для другого, первый элемент будет занимать в два раза больше места.
Также можно использовать свойство flex-shrink, которое определяет, насколько элемент может уменьшиться по сравнению с другими элементами в случае нехватки места. Если установить flex-shrink: 0 для элемента, он не будет уменьшаться в размере.
Наконец, свойство flex-basis позволяет установить базовый размер элемента перед распределением свободного пространства. Например, можно задать flex-basis: 200px для элемента, чтобы установить его базовую ширину.
Пример использования этих свойств в CSS:
.flex-container { display: flex; } .flex-item { flex-grow: 2; flex-shrink: 0; flex-basis: 200px; }
Таким образом, изменяя значения свойств flex-grow, flex-shrink и flex-basis для flex-элементов, можно контролировать их размеры без изменения положения соседних блоков.