Как создать равное расстояние между центрированными 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

Просто нанесите запас на все дивы:

#section1 > div { margin: 10px; } 

DEMO

Answer 2

Поскольку отображение section является flex, попробуйте изменить justify-content:center; в justify-content:space-around;. Это дает пробелы между ящиками. И когда браузер сжимается, он также переносит ящики.