1

How could I, by using flexbox, make all the cards the same size, and on the second row, if there aren't enough cards to fill the row, then align the cards to the left, and leave empty space on the right? At the moment, the cards grow to fill the space, on the second row.

Dummy data - flexbox example

Here is my CSS:

.container {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}

.card {
    flex: 1 1 0;
    padding: 0.5rem;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
userden
  • 1,615
  • 6
  • 26
  • 50
  • Please include HTML, and ideally a working demo, thanks – sol Jun 28 '17 at 13:16
  • see my answer it will be help https://stackoverflow.com/a/44420542/4824088 – Mohamed Mohaideen AH Jun 28 '17 at 13:17
  • Also possible dupllicate of https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid/44420542#44420542 – Mohamed Mohaideen AH Jun 28 '17 at 13:18
  • 1
    @Paulie_D, please note the first question you indicated as answer asks for aligning items on last row *"to grid"* while this question only wants them algined to left, irrespective of their width (there's no grid). I added my answer there as well, since it gets pointed to a lot. – tao Jun 28 '17 at 14:41

0 Answers0