How to change flexbox wrap?

Question

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>

Possible duplicate of [How to center a flex container but left-align flex items](https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items) — Sebastian Brosch, Jun 11 '17 at 09:18
`.card:last-child { margin-right:auto; }` is this what you try to do ? https://codepen.io/anon/pen/yXOMVZ — G-Cyrillus, Jun 11 '17 at 09:39

Asons · Accepted Answer · 2017-11-30T19:31:39.027

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.

checking this out, would probably need a counter for amount of rendered cards in react. — Hyrule, Jun 11 '17 at 09:43
@Hyrule If you know there will be no more than 7 columns, just create 6 _ghost_ elements, ... and because it doesn't matter if there are to many as they only take up space horizontally, it will work on 6,5,4,3,2 columns as well — Asons, Jun 11 '17 at 09:54

score -1 · Answer 2 · answered Jun 11 '17 at 09:07

-1

Change your CSS as follows:

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

Add margin to the cards if you need to.

answered Jun 11 '17 at 09:07

Gerard

15,418
5
30
52

this removes the centering of the cards if i resize and Everything starts from the left instead the last 2 cards. – Hyrule Jun 11 '17 at 09:11
That does not solve the problem of the OP which is about centering the container horizontally. – Vincent Cantin Sep 26 '17 at 07:11

How to change flexbox wrap?

2 Answers2

Linked

Related