フレキシボックス+ 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番目の列には少なくとも2つの項目が表示されます。
マイケルに感謝します。それは他のCSSで可能ですか(フレックスボックスである必要はありません)? –
CSSグリッドレイアウトを試してください。詳細は、重複投稿を参照してください。 –