Esnek bir kapsayıcıda ortalanmış div'ler arasındaki eşit aralık nasıl oluşturulur

Question

Yatay bir satırdaki div'ler arasında nasıl boşluk bırakılacağını bilmek ister misiniz?

Kutuları ortalamak için justify-content:center ve pencere yeniden boyutlandırıldığında sarmak için flex-wrap:wrap kullanın. Ancak, margin-left ve margin-right ile #div2 (orta kutu) eklemek çalıştığımda, pencere yeniden boyutlandırıldığında ortalanmış düzeni bozar.

Farkettiğiniz gibi, sitemi mobil uyumlu ve her boyutta ekrana duyarlı hale getirmeye çalışıyorum. Teşekkür ederim.

<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

Sadece tüm div öğelerine bir marj uygulanır:: İşte

kodudur section gösterimi, flex olduğundan

#section1 > div { margin: 10px; } 

DEMO

Answer 2

justify-content:center; içine değiştirmeyi deneyin justify-content:space-around;. Kutular arasında boşluklar verir. Tarayıcı küçüldüğünde, kutuları da saracak.