如何使用Flexbox在HTML中将多个包装好的列对齐？

Question

我正在尝试在flexbox中获取多个包装的项目列。我的HTML中有两列项目，分别称为colA和colB。 colA不在容器的高度内，因此将其包装为colA1和colA2。我的问题是colB最终位于colA2的顶部，而不是我期望的那样。这是一个例子。我已经将colA设为橙色，将colB设为蓝色。您可以在colB下面看到colA包装（并且溢出列根本不使用bg颜色-可能相关吗？）

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}

<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>

Answer 1

您的#colA没有设置高度，将其设置为auto即可容纳内容。

.row {
  display: flex;
  flex-direction: row;
}
.column {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 80px;
}
.item {
  padding: 5px;
}
#colA {
  background: rgba(100%, 50%, 0%, 1.0);
  border: dotted;
  height:auto;
}
#colB {
  height: 100px;
  background: rgba(00%, 50%, 100%, 0.5);
  border: dashed;
  opacity: 50%;
}

<div class="row">
<div class="column" id="colA">
  <div class="item">ColA thing1</div>
  <div class="item">ColA another thing</div>
  <div class="item">ColA what is this?</div>
  <div class="item">ColA keep going</div>
  <div class="item">ColA still here?</div>
  <div class="item">ColA wrap wrap</div>
</div>
<div class="column" id="colB">
  <div class="item">Column B something</div>
  <div class="item">Column B another thing</div>
</div>
</div>

Answer 2

.column中的flex wrap尝试将内容保留在一行中，将其删除，您将获得期望的结果 你可以在这里阅读更多信息 https://css-tricks.com/snippets/css/a-guide-to-flexbox/