多行flexbox，容器宽度只有一列

Question

我正在将多行flexbox与flex-direction: column;一起使用。并且flex容器已从正常流程中移除（例如，使用position: absolute;）

.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 110px;
  background: yellow;
  border: solid 1px black; 
}

.item{
  height: 50px;
  width: 50px;

  border: solid 1px red; 
  margin: 1px; 
  box-sizing: border-box; 
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

</div>

https://codepen.io/SakerONE/pen/zJxXXN

如何使容器宽度随着列数的增长而增加？现在，容器的宽度只有一列（50像素）。

Answer 1

您不只是想使用flex-direction:row吗？您可以通过在每个项目上使用flex-basis来限制每行的项目数。

每个项目上的

flex-basis:33%限制为每行3个项目。

---

或者，在height:auto上使用.container。