垂直布局 css

Question

我想用 flexbox 创建一个垂直布局。

结构如下：

.container {
  display: flex;
  flex-direction: column;
}

<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>

每列应该显示 6 个项目

Answer 1

试试这个风格：

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

我在这里所做的是设置容器的高度 div 以便弹性项目在溢出时换行到下一列。为此，您还需要设置 flex-wrap: wrap;。在这种情况下，height: 112px 导致了溢出。您可以根据您的要求进行更改。

Answer 2

高度是动态的，基于你想要垂直控制的项目数量（在本例中为 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="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>

Answer 3

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

为了清楚起见，想象一个带有一些文本的简单段落标记。一旦文本超过页面（或容器）的宽度，多余的文本就会换行到下一行。因此，对于行，宽度可以设置为限制，默认情况下为视口宽度的 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 解决方案来完美解决这种情况。

希望对您有所帮助。

Answer 4

由于 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 - 希望对您有所帮助。

垂直布局 css

Vertical layout css

html

css

vertical-alignment

flexbox