CSS Flexbox Align Itens 2 itens per rows but last row only one item

Question

I'm trying to align itens using Flexbox. There are 2 "cards" per row and I need to align in center to fit in different devices resolutions (mobile) but the last card need to be on start. Tried to use align-self: start but no success.

Code:

.parent {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    justify-content: center;
    gap: 16px;
}

.parent > .card {
    height: 220px;
    width: 152px;
}

@nagendranag but if I remove, how can I center the entire list to show im the middle of the screen? — vitorvr, Jan 26 '22 at 16:08

score 1 · Answer 1 · answered Jan 26 '22 at 16:29

You could wrap your parent container in another div, and set it to justify-content:center. In this way your layout would remain undisturbed.

Here is the CSS:

.new-parent{
      display:flex;
      flex-direction:row;
      justify-content: center;
}

.parent {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    justify-content: flex-start;
    gap: 16px;
}

.parent > .card {
    height: 220px;
    width: 152px;
}

score 1 · Answer 2 · answered Jan 26 '22 at 16:30

Here is an example with the implementation of the grid system which I think would be more appropriate in your case.

However with by using css grid you limit yourself to having only 2 cards per row.

If you want to change the number of cards per row depending on the screen size, you will have to implement it by changing the grid-template-columns property and using media-queries.

.parent {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card {
    height: 220px;
    width: 152px;
    border: 2px solid black;
}

<div class="parent">
  <div class="card-list">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

This is a good ressource to learn more about css grid: www.cssgridgarden.com

score 1 · Accepted Answer · answered Jan 26 '22 at 16:38

You can handle this by assign width to the parent ( not more as two child witds together). Like this

.parent {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    justify-content: center;
    gap: 16px;
    width: 350px;
    margin: 0 auto;
}

.parent > .card {
   height: 220px;
   width: 152px;
   border: 1px solid black;
}

<div class="parent">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

CSS Flexbox Align Itens 2 itens per rows but last row only one item

3 Answers3