如何防止 DIV 在第二行换行？

Question

我正在尝试制作一个非常简单的卡片列表，每行应该有 3 张卡片，它们之间的间距为 20 像素。因此，每张卡片应占据父容器的 1/3。但是由于某种原因，当我减小浏览器的大小 window 时，第三张卡片移到了第二行。我该如何防止这种情况？

.parent{
  border: solid green 1px;
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  height: 100px;
  gap: 20px;
}
.child{
  width: 32.2%;
  border: solid blue 1px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 1

flex-wrap: nowrap; 应该可以满足您的需求。您可以通过 calc(100% / 3); 设置子项的宽度。为此，请删除父级 1000px 的固定宽度。

.parent{
  border: solid green 1px;
  display: flex;
  flex-wrap: nowrap;
  height: 100px;
  gap: 10px;
}
.child{
  width: calc(100% / 3);
  border: solid blue 1px;
  background-color: blue;
  
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

使用ul:

.parent {
  border: solid green 1px;
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  height: 100px;
  gap: 10px;
  list-style-type: none;
  padding-inline-start: 0;
}

.child {
  border: solid blue 1px;
  background-color: blue;
  flex-basis: 31%;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

Answer 2

您可以在您的父容器中更改 flex-wrap: nowrap; 并且您可以将项目宽度更改为 100%；

.parent{
  border: solid green 1px;
  display: flex;
  flex-wrap: nowrap;
  width: 1000px;
  height: 100px;
  gap: 20px;  
  box-sizing: border-box;
}
.child{
  width: 100%;
  border: solid blue 1px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

更新

与flex-basis

.parent{
  border: solid green 1px;
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  height: 100px;
  gap: 20px;  
  box-sizing: border-box;
  justify-content: space-between;
  
}
.child{
  flex-basis: 30%;
  border: solid blue 1px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>  
</div>

如何防止 DIV 在第二行换行？

How to prevent DIV wrapping on the second row?

html

css

frontend

flexbox

更新