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>

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

1 个答案: