垂直布局 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 个项目

1    7
2    8
3
4
5
6

Answer 1

由于 OP 同意接受 CSS Grid 解决方案，这里有一个：

.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 - 希望这会有所帮助。

Answer 2

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

为了清楚起见，想想一个带有一些文本的简单段落标签。一旦文本超过页面（或容器）的宽度，多余的文本将换行到下一行。因此，对于行，可以将宽度设置为限制，默认为视口宽度的 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 3

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

试试这种风格：

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

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