Я работал над галереей изображений, используя flexbox с переходом на основе flex, чтобы увеличивать и уменьшать элементы при наведении.У меня проблема с адаптацией галереи для использования flex-wrap, чтобы перейти к следующему ряду после 5-го элемента.
Я надеюсь, что он заработает, чтобы в каждой строке было по 5 элементов, которые растут и уменьшаются в одной строке.После того, как шестой элемент помещен в контейнер, я хочу перейти к следующей строке, чтобы элементы продолжали функционировать, как и ожидалось (с переходами).
- Элементы растягиваются, чтобы заполнить доступное пространство (ширина 20% для каждого из 5 элементов)
- -> При наведении курсора другие элементы сжимаются на 5% в общей сложности на 20%
- Рост элемента с навесом увеличивается до 40%
- Шестойэлемент, который перемещается в следующую строку, наследует размер доступного пространства
- Седьмой элемент занимает 50% строки, восьмой 33,3% ... и т. д.
Это то, что у меня сейчас есть: https://codepen.io/TommyBoyLab/pen/YdzGjB
(адаптировано из: https://codepen.io/joliveras/pen/GpLVKv)
HTML элемента:
<div class="container">
<div class="item" style="background:url() center/cover">
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.container .item {
display: grid;
position: relative;
flex: 1;
transition: 500ms;
min-width: 15%;
max-width: 20%;
height: 50vh;
}
.container .item:hover {
transition: 500ms;
max-width: 40%;
flex-grow: 1;
}
.container .content {
margin: auto;
font-size: 1.5em;
}