使用垂直展开的容器创建两列布局

Question

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

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

1. 容器以特定高度开始（例如200px）
2. 有两列
3. 项目填充第1列，如果需要更多空间，请填写第2列。
4. 如果第1列和第1列第2列已满，然后展开容器的高度。

详细示例here。

为

不可

元素首先填充第1列：

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

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

Answer 1

使用flexbox，您可以在flex-direction为row时垂直展开容器。但是，正如您所指出的那样，这会水平放置弹性项目 - 从左到右（在LTR书写模式下）然后返回，就像一台旧打字机一样。

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

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

Answer 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个项目。