如何使弹性项目垂直而不是等高出现？

Question

出于某种原因，我在一个 flex 容器中的 3 个孩子每个都具有相同的高度，但期望的行为是让项目一个接一个地出现，而不是填满它们给定的空间。见：

.col-md-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  flex: 0 0 100%;
  max-width: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  position: fixed;
  height: 100vh;
  width: 420px;
  background: #313131;
  padding: 0;
}

.item {
  display: flex;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: yellow;
}

<div class="container">
  <div class="item one col-md-12"></div>
  <div class="item two col-md-12"></div>
  <div class="item three col-md12"></div>
</div>

如您所见，三行各占父母身高的 33.3%。一个在顶部，一个在中间，一个在底部。

但它应该是一个接一个的 3 行。所以，由此（灰色是孩子的内在内容）：

对此（背景灰色为父级）：

我怎样才能做到这一点？

Answer 1

只需添加flex-flow: column。

.col-md-12 {
  position: relative;
  width: 100%;
  height: 1px;
}

.container {
  display: flex;
  flex-flow: column;
  position: fixed;
  height: 100vh;
  width: 420px;
  background: #313131;
  padding: 0;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: yellow;
}

<div class="container">
  <div class="item one col-md-12"></div>
  <div class="item two col-md-12"></div>
  <div class="item three col-md-12"></div>
</div>

Answer 2

您可以将换行更改为不换行或将宽度更改为 33.3%

 .col{
   width: 100%; 
   height: 100%;
 }

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: no-wrap;
  position: fixed;
  height: 100vh;
  width: 420px;
  background: #313131;
  padding: 0;display: flex;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: yellow;
}

<div class="container">
  <div class="col one"></div>
  <div class="col two"></div>
  <div class="col three"></div>
</div>