如何根据不同的子项数量均匀地间隔 Flexbox 项目？

Question

我有一个列表视图，其中所有列表项都设计为看起来像卡片。我习惯justify-content: space-between将卡片均匀分布。我需要在宽屏幕上排成一排显示 5 张卡片，但卡片应以相同的间隙放置在左侧。

当我需要将 3 张卡片排成一行时，此代码非常有效，但当我需要将 5 张卡片排成一行时，此代码就不起作用了。对于这个例子，我将<ul>and<li>替换<div>为.parentand.child类。

我该如何修复它？

.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 class="parent">
  <div class="child"> <span>1</span> </div>
  <div class="child"> <span>2</span> </div>
  <div class="child"> <span>3</span> </div>
  <div class="child"> <span>4</span> </div>
  <div class="child"> <span>5</span> </div>
</div>

Answer 1

似乎特定宽度百分比是有序的。如果这不是您真正想要的，则无需使用 Flexbox 的间距，也无需使用伪元素。

我已将间隙值放入自定义属性中，以便于维护，因为它被重复使用。

: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 class="for-demo-only">
  <div class="parent">
    <div class="child"> <span>1</span> </div>
    <div class="child"> <span>2</span> </div>
    <div class="child"> <span>3</span> </div>
    <div class="child"> <span>4</span> </div>
    <div class="child"> <span>5</span> </div>
  </div>
  
  <div class="parent">
    <div class="child"> <span>1</span> </div>
    <div class="child"> <span>2</span> </div>
    <div class="child"> <span>3</span> </div>
    <div class="child"> <span>4</span> </div>
    <div class="child"> <span>5</span> </div>
    <div class="child"> <span>6</span> </div>
    <div class="child"> <span>7</span> </div>
  </div>

  <div class="parent">
    <div class="child"> <span>1</span> </div>
    <div class="child"> <span>2</span> </div>
  </div>

  <div class="parent">
    <div class="child"> <span>1</span> </div>
    <div class="child"> <span>2</span> </div>
    <div class="child"> <span>3</span> </div>
  </div>
</div>