フレックスボックスのアイテムを空にするには？

Question

私はウェブサイトを作成していますが、テキストコンテンツであるページのコンテンツを2列にしたいとします。私はコンテンツの各部分の幅が50%であるコンテンツのコンテナとしてフレックスボックスを使用しています。この問題は、以下の画像に示されている：

私は3Sのdiv要素は、代わりに空の残りとページの外観を台無しにする2S divの下に残された空間を占有します。ここで

ケースを示し、単純なコードです：

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    width: 50%; 
 
    padding: 25px; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>

、ここではあなたが好む場合CodePenリンクされていますlink

Answer 1

何を見てすることはCSS Multi-column Layoutだろう。 （​​）

flexは、要素列を列単位または行単位で、スパンスルーなしで描画します。

ここにあなたがする必要があります：列

に

• セット方向は、第1 COLが満たされたとき、次の列にラップトリガーするために、コンテナの高さを設定します。

gridスパニングを許可しますが、設定する必要があります。

floatまた、Felix Mosheevが提案した方法とすることもできます。

#container { 
 
    column-count: 2; 
 
    column-fill:balance 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    padding: 25px; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>

Answer 2

あなたが使用する必要はありません "フレックスボックス 'の場合、floatの要素は、あなたが望むように振る舞います。

float: leftを.dに置き、そのギャップを埋めます。

4のdivが別の行にある必要がある場合は、clear: both/left/rightでそれを達成できます。

#container { 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    width: 50%; 
 
    padding: 25px; 
 
    float: left; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>