フレックスコンテナの中央揃ったdiv間の等間隔を作成する方法

Question

div間の間隔を水平方向に作成する方法を知りたいですか？

私はjustify-content:centerを使用してボックスを中央に置き、ウィンドウをサイズ変更するときにはflex-wrap:wrapをラップします。しかし、margin-leftとmargin-rightを#div2（中央のボックス）に追加しようとすると、ウィンドウのサイズが変更されたときに中央のレイアウトが乱されます。

あなたが気づいたことがあるように、私は自分のサイトをモバイルでフレンドリーで、あらゆる画面サイズに対応しようとしています。ありがとうございました。ここで

はコードです：

<div id="pusher"> 
    </div> 

    <section id="billboard"> 
    </section> 


    <section id="section1"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
    </section> 


body,html{ 
padding:0px; 
margin:0px; 
} 

header{ 
width:100%; 
background-color:brown; 
height:75px; 
position:fixed; 
} 

#pusher{ 
width:100%; 
height:75px; 
} 

#billboard{ 
height:500px; 
background: url(""); 
background-repeat:no-repeat; 
background-size:cover; 
background-color:red; 
} 

#section1{ 
display:flex; 
flex-wrap:wrap; 
justify-content:center; 
overflow:auto; 
} 


#div1{ 
background-color:blue; 
height:250px; 
width:250px; 
min-width:250px; 
} 

#div2{ 
background-color:yellow; 
height:250px; 
width:250px; 
min-width:250px; 
} 

#div3{ 
background-color:green; 
height:250px; 
width:250px; 
min-width:250px; 
} 

Answer 1

ただ、すべてのdivにマージンを適用します。

#section1 > div { margin: 10px; } 

DEMO

Answer 2

sectionの表示がflexあるので、へjustify-content:center;を変更してみてくださいjustify-content:space-around;。それはボックス間にスペースを与えます。ブラウザが縮小すると、ボックスもラップされます。