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

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;
}

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>

CodePudding user response：

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;
}

CodePudding user response：

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 >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>

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