フレックスボックスの商品はどのように包装されていますか？

Question

私はどのように私のcodepen最後に<div>が次の行にラップされて検出できますか？私はこれに設定したい<div>margin-left: 0。ほんの一例です。

Answer 1

各ボックスの下部と右側に余白を適用するのはどうでしょうか。

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    background: #e9e9e9; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    padding: 10px 0 0 10px; 
 
} 
 
.container div { 
 
    background: #a3a3a3; 
 
    width: 125px; 
 
    height: 125px; 
 
    margin: 0 10px 10px 0; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>