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

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 <ul> and <li> with <div> 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%;
  }
}

<div >
  <div > <span>1</span> </div>
  <div > <span>2</span> </div>
  <div > <span>3</span> </div>
  <div > <span>4</span> </div>
  <div > <span>5</span> </div>
</div>

CodePudding user response：

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

<div >
  <div >
    <div > <span>1</span> </div>
    <div > <span>2</span> </div>
    <div > <span>3</span> </div>
    <div > <span>4</span> </div>
    <div > <span>5</span> </div>
  </div>
  
  <div >
    <div > <span>1</span> </div>
    <div > <span>2</span> </div>
    <div > <span>3</span> </div>
    <div > <span>4</span> </div>
    <div > <span>5</span> </div>
    <div > <span>6</span> </div>
    <div > <span>7</span> </div>
  </div>

  <div >
    <div > <span>1</span> </div>
    <div > <span>2</span> </div>
  </div>

  <div >
    <div > <span>1</span> </div>
    <div > <span>2</span> </div>
    <div > <span>3</span> </div>
  </div>
</div>