html - 高度完全填充的 Div 列

Question

我有一个div(容器)。我在其中放置了 div，它们应该像往常一样排列在 y 上而不是 x 上。

我会附上一张图片来更好地解释:

我尝试使用 display: table-cell，使用 float 但没有解决方案。怎么办？

我没有固定数量的列，我希望它们在 height 上填充，在 width 上向右移动直到到达 #mydiv 宽度限制，然后 display: none。

<ul class="prod_ul">


<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>
<li data-gal="" class="hm_gal"></li>


</ul>

Answer 1

flexbox 在这里很有用，同时您可以将 flex-direction 设置为 column 以使其垂直。请参阅下面的代码片段以获取演示。

您可以将 .box 的宽度和高度设置为任意大小，它会尝试填充空间。在 CSS Tricks 阅读更多关于 flexbox 属性以及如何使用它的信息.

#mydiv {
  border: 1px solid blue;
  display: flex;
  align-content: flex-start;
  flex-flow: column wrap;
  height: 100vh;
}

.box {
  border: 1px solid red;
  width: 50px;
  height: 50px;
}

<div id="mydiv">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
</div>