使用垂直扩展容器创建两列布局[重复]答案

【问题标题】：Create a two column layout with a vertically expanding container [duplicate]使用垂直扩展容器创建两列布局[重复]
【发布时间】：2017-06-03 13:51:23
【问题描述】：

我想创建一个两列布局（仅 CSS，无 javascript）。

有一些要求使这变得复杂：

容器以特定高度开始（例如200px）
有两列
项目填充第 1 列，如果需要更多空间，则填充第 2 列。
如果第 1 列和第 2 列已满，则扩大容器的高度。

详细示例here。

不好

好

元素首先填充第 1 列：

接下来，元素填充第 2 列：

当达到容器的最小高度时，容器会展开并且元素在两列之间重排：

【问题讨论】：

标签： css flexbox

【解决方案1】：

使用 flexbox，当flex-direction 为row 时，您可以垂直扩展容器。然而，正如您所注意到的，这会水平排列 flex 项目 - 从左到右（在 LTR 书写模式下）然后返回，就像旧打字机一样。

在flex-direction: column中，项目从上到下排列，容器水平展开。

你想要的——让列从上到下堆叠，垂直扩展容器（如 Pinterest 布局）——目前无法使用 flexbox。

【讨论】：

谢谢迈克尔。是否可以使用任何其他 CSS（不需要是 flexbox）？
试试 CSS 网格布局。有关详细信息，请参阅重复的帖子。

【解决方案2】：

Flexbox + CSS 列让您真正接近...

http://codepen.io/simshanith/pen/ZLLvGB?editors=1100

HTML：

<div class="container">
  <div class="columns">
    <div class="item">1</div>
    <!-- etc. -->
  </div>
</div>

CSS：

.container {
  background: rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 200px;
  width: 600px;
}

.columns {
  column-count: 2;
  column-gap: 0;
  flex: 1;
}

.item {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid blue;
  width: 100%;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

但是，第一列没有填充到 200px。 CSS Columns 优化为最短，因此第二列将显示至少 2 个项目。

【讨论】：