如何垂直对齐水平溢出的元素

Question

我希望能够创建一个 div 并设置大小（在本例中为 100x100）。

然后我希望能够在 div 中添加 x 个元素，在此示例中，我们可以说 10 个大小为 10x10 的按钮并将它们垂直对齐。

这意味着所有按钮都应位于一列中。

然后，如果我调整大小并将新尺寸设为 80x80，我应该有 2 列，第一列包含前 8 个按钮，然后是包含最后 2 个按钮的新列。

我试过

flex-wrap: wrap;
display: flex;
flex-direction: column;
align-content: flex-start;

它是垂直对齐的，但是当我调整大小时按钮总是越过底部。

我如何对齐所有元素，使它们垂直对齐，但如果高度不够，它应该溢出到一个新列中。所以没有设置列数，因为它可能是 x 列数，具体取决于大小。

这可以使用 css 吗？

Answer 1

我认为只有当你给容器一个最大高度时它才有效。这是你需要的吗？

.container {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  max-height: 100px;
}

.button {
  width: 100px;
  height: 10px;
  border: solid thin black;
}

<div class="container">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

如何垂直对齐水平溢出的元素

How to vertically align elements with horizontal overflow

css

vertical-alignment