創建一個垂直擴展容器的兩列布局

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個項目。