创建一个垂直扩展容器的两列布局

Question

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

有一些要求，使这个复杂：

1. 集装箱与特定的高度开始（如200px）
2. 有两列
3. 项填写第1列，那么，如果有更多的空间需要填充第2列。
4. 如果第1列&第2列已满，则展开容器的高度。

详细示例here。

为

良好

元素首先填充第1栏：

接下来，要素填充第2栏：

当容器的分达到imum高度，容器膨胀，元素两列之间回流：

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列最短优化，所以第二列将出现至少2个项目。