How can I space flexbox items evenly with varying child counts?

Question

I have a list view in which all the list items are designed to look like cards. I use justify-content: space-between to distribute the cards evenly. I need to display 5 cards in one row on a wide screen, but the cards should be placed on the left with the same gaps.

This code works great when I need to have 3 cards in one row, but not when I have 5 cards in one row. For this example I replaced

with

with .parent and .child classes.

How can I fix it?

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}

.parent::after {
  content: "";
  width: 16%;
  height: 0;
}

.child {
  flex-basis: 16%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width : 1024px) {
  /* for tablet */
  .parent::after {
    width: 46%;
  }
  .child {
    flex-basis: 46%;
  }
}

@media only screen and (max-width : 768px) {
  /* for mobile */
  .parent::after {
    display: none;
  }
  .child {
    flex-basis: 100%;
  }
}

user_1264804 · Answer

Seems like specific width percentage is in order. No need to use the spacing of flexbox if that's not what you actually want, and no need for pseudo-elements.

I've put the gap value in a custom property for easier maintenance since it's used repeatedly.

:root {
  --col-gap: 20px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: var(--col-gap);
  box-sizing: border-box;
  justify-content: start;
  background-color: lightgreen;
  margin-bottom: 20px;
}

.child {
  flex-basis: calc(100%/5 - var(--col-gap));
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1024px) {
  .child {
    flex-basis: calc(100%/2 - var(--col-gap));
  }
}

@media only screen and (max-width: 768px) {
  .child {
    flex-basis: 100%;
  }
}

How can I space flexbox items evenly with varying child counts?

1 Answers