How to change flexbox wrap?
I have a responsive flexbox box with dynamically rendered cards (from 1-10 cards rendered each api call) in my application. It Almost does exactly what i want it to do except the way it wraps.
Let's say i rendered 10 cards, if i resize screen so it turns into e.g. 4-4-2 the last 2 cards are centered, i want it to wrap so the last 2 cards start from the left and with equal spacing like the cards above. How can you do that?
EDIT to eloborate further: let's say i resize even further into 1-1-1-1-1-1-1-1-1-1 , the cards should appear centered, i still need the centering, but i want the last 2 cards to wrap from the left side if it turns into 4-4-2 or 3-3-2 etc.
https://codepen.io/hyrosian/pen/EXKZJz
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}<div class="container">
<div class="recipe-grid">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
</div>
Solution 1:
If to use Flexbox, and without script, you could create ghost elements, so they fill out the space on the last line.
So for a possible column length of 4, you need 3 ghost element and so on.
It is also possible to use the pseudo elements, which will decrease the needed ghost's by 2.
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.card:empty {
width: 300px;
box-shadow: none;
margin: 2rem;
padding-bottom: 0;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}<div class="container">
<div class="recipe-grid">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>Updated
Since you use justify-content: space-around, you could also do like this, where you add an extra wrapper around the card, center it and then, with media queries, make the wrappers fill the line based on the amount of items per row.
Note, since one can't use CSS calc in the media query, the values are based on 1rem equals 16px, so the first is calculated like this: 300px + (2rem * 2) = 728px and so on. So if your browsers's default font size on the root element is anything but 16px, you either set it to that, or recalculate the query values
.card {
text-align: center;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
max-width: 300px;
margin: 2rem;
padding-bottom: 1rem;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.recipe-grid .card-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
@media (min-width: 728px) { .recipe-grid .card-wrapper { width: 50%; } }
@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%; } }
@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%; } }<div class="container">
<div class="recipe-grid">
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">
<h3> Egg beef sandwich </h3>
<p> 604 kcal - totally vegan </p>
</div>
</div>
</div>
</div>Finally, I also want to mention these posts, how-to-center-a-flex-container-but-left-align-flex-items and can-i-change-the-justify-content-value-depending-on-the-number-of-elements-in (which might can be considered a duplicate to this), as it has a great explanation how Flexbox works when it comes to its ability to both wrap and center items, and some more solutions than the one's I gave.