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

This question already has answers here:

When flexbox items wrap in column mode, container does not grow its width
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
我正在尝试在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>

最佳答案

您的#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>

关于html - 如何使用Flexbox使多个包装的列在HTML中对齐？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52989956/