需要一个响应式解决方案来每行包装 3 个列表项

Question

一个单独的问题来找到我们几乎已经找到的最终解决方案（非常感谢在那里回答的每个人）。

我有一个无序列表。该列表可以包含任意数量的项目，它是动态的。列表的样式化方式是每行有 3 个列表项（每个项占父宽度的 1/3）。

我在上面提到的另一个问题中提出的解决方案有两个问题：

如果我们使用 justify-content: flex;，当列表中有 5 个项目时，第 4 和第 5 个项目跳到对角，而它们必须粘在左边。
如果我们减小屏幕尺寸，出于某种原因，每行将有 2 个项目而不是 3 个项目。如果每行这 2 个项目占据父宽度的 1/2，那会很好，但它们要小得多。

这就是我需要的。如果我们有 3 个列表项，列表应该这样看：

这是一个说明，说明如果列表中有 4 个或更多项应该发生什么：

这是我试过的代码（感谢其他 post 的帮助）：

.parent{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  gap: 20px;  
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}
.child{
  flex-basis: 30%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

<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

使用:after伪元素来模拟一个不可见的子元素div，因此项目的对齐方式固定为左对齐。以及响应式的媒体查询。查看代码片段以了解一些想法。

.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: 30%;
  height: 0;
}

.child {
  flex-basis: 30%;
  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>

需要一个响应式解决方案来每行包装 3 个列表项

Need a responsive solution for wrapping 3 list items per row

html

css

frontend

flexbox

web