Question

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

这是结构：

＆＃13;

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

＆＃13;

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

＆＃13;

它应该每列显示6个项目

Answer 1

试试这种风格：

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

我在这里做的是设置容器div的高度，以便flex项在溢出时包裹到下一列。为此，您还需要设置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的{{1}}。 PEN

viewport-width

请注意，这不是一个完美的解决方案，因为当内容超出高度并且还存在浏览器兼容性问题时，它可能会导致错位。您也可以考虑使用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

4 个答案: