垂直布局css

对于要拆分为新列的结构,它需要知道它可以容纳其内容的限制。

为了清楚起见,可以考虑一个简单的段落标记和一些文本。一旦文本超过页面(或容器)的宽度,多余的文本将换行到下一行。因此,对于行,可以将宽度设置为限制,默认情况下为视口宽度的100%或容器宽度的100%。

但这里我们处理的是列,它以高度为限制,这里的挑战是HTML文档中的高度是无限的。因为当内容随着垂直滚动条的增加而增加时,页面的高度会增加到任何程度。(注意,如果宽度为 overflow 水平滚动条,但这里我们讨论的是默认行为)。

因此,在这种情况下,只有在指定容器的高度时,才能将内容拆分为新列(CSS网格除外)。

它可以以像素或rem为单位指定,如其他答案中所述。

或者,如果您正在寻找与上述行相同的行为,您可以求助于 viewport-height 类似 viewport-width 如果是行。 PEN

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
}

.child {
  height: 16.667vh;
}

请注意,这并不是一个完美的解决方案,因为当内容超过高度时,它可能会导致错位,并且还存在浏览器兼容性问题。您也可以考虑CSS网格或尝试Javascript解决方案来完美地解决此场景。

希望这有帮助。

尝试此样式:

.container {
    display: flex;
    flex-direction: column;
    height: 112px;
    flex-wrap: wrap;
}

我在这里所做的是将height设置为container div,以便flex项在溢出时包装到下一列。为此,您需要设置 flex-wrap: wrap; 也在这种情况下, height: 112px 导致溢出。您可以根据需要进行更改。

高度是动态的,基于要垂直控制的项目数(在本例中为6),我已根据 1rem font-size :

6项示例:

.container {
  display: flex;
  flex-flow: column wrap;
  font-size: 1rem;
  max-height: calc(6 * 1.2em);
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

7项示例:

.container {
  display: flex;
  flex-flow: column wrap;
  font-size: 1rem;
  max-height: calc(7 * 1.2em);
}

<div class=“容器”>
<div class=“子项”>1</div>
<div class=“子项”>2</div>
<div class=“子项”>3</div>
<div class=“子项”>4</div>
<div class=“子项”>5</div>
<div class=“子项”>6</div>
<div class=“子项”>7</div>
<div class=“子项”>8</div>
</div>

由于OP同意接受CSS网格解决方案,这里有一个:

.container {
  display: grid;
}

.child:nth-child(6n + 2) {
  grid-row-start: 2;
}

.child:nth-child(6n + 3) {
  grid-row-start: 3;
}

.child:nth-child(6n + 4) {
  grid-row-start: 4;
}

.child:nth-child(6n + 5) {
  grid-row-start: 5;
}

.child:nth-child(6n) {
  grid-row-start: 6;
}

PEN -希望这有帮助。