フレックスラップ：divの行の下に折り返し余白を作成する

Question

http://tsuts.tskoli.is/2t/2809984199/skapalon/ < - ここにホストされています。

Classes ContainerとProjectskortは、見るべきものです。

.container{ 
display: flex; 
min-height: 100vh; 
width: calc(100vw - 500px); 
flex-wrap: wrap; 
justify-content: space-between; 
margin: 0 auto; 
} 
.projectskort{ 
margin-top: 10px; 
width: 224px; 
height: 270px; 
border-radius: 3px; 
background-color: white; 
} 

お手数ですが、ありがとうございました。

Answer 1

これは、align-contentのデフォルト値がstretchで、セクションの高さ全体にラインが広がっているためです。あなたのフレックスがそれにハード書かれた高さを持っているので、あなたが参照している余裕が作成されているflex-start

.container { 
    display: flex; 
    min-height: 100vh; 
    width: calc(100vw - 500px); 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 0 auto; 
    align-content: flex-start; 
} 

Answer 2

にそれを設定する必要があります。

あなたは100vhを塗りつぶすように強制していますが、2行の内容でそれぞれが50％を満たしています。

3行目にdivを追加すると、すべてがコンテナの高さの33％を占めることがわかります。

希望するものを試して複製するには、フレックスコンテナから最小の高さを取り除き、フレックスコンテナを最小高さ100vhのラッピングコンテナに入れます。