I've been working on an image gallery using flexbox with a flex-basis transition to grow and shrink the elements on hover. I am having a problem adapting the gallery to use flex-wrap to break to the next row after the 5th element.
The way I'm hoping for it to function is that each row has 5 elements that grow and shrink on the same row. After the a sixth element is placed in the container I want to break to the next row and have the elements continue functioning as expected (transitions included).
- Elements stretch to fill available space (width of 20% for each of the 5 elements)
- -> On hover, the other elements shrink 5% for a total of 20%
- Hovered element grows to 40%
- Sixth element that moves to next row inherits the size of the available space
- Seventh element takes up 50% of row, eighth 33.3%...ect.
This is what I currently have: https://codepen.io/TommyBoyLab/pen/YdzGjB
(adapted from: https://codepen.io/joliveras/pen/GpLVKv)
HTML of element:
<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;
}
