CSS3 Flexbox aralıkları arasındaki boşluk

Question

Flexbox için biraz yeni olmak (CSS'de deneyimliyse de), okudum çoğu öğretici tarafından uygun bir şekilde "göze çarpan" bir şey esnek öğeler arasındaki boşluk. Örneğin, en çok alıntı yapılan derslerden biri this one at CSS Tricks'dir.

Böyle diyagramlar beni çıkarıp attılar, çok iyi ve yararlı olmuştur: esnek öğeler arasında

Bildirim alanlar. Herhangi bir yerde belirtilmediyse de, örnek kodda, boşlukları css marjları ile elde etmenin tek yolu gibi görünecektir.

Doğru veya önemli bir şey mi eksik?

i oluşturmak için gerekenleri Çünkü bu, yukarıdaki "merkez" demo gibi bir sürü:

eğer: Ancak

, kendimi denemek, ben tabii bu olsun Uzayda kullanıyorum, bunun yerine bunu aldım. Büyük uzay. Bu nedenle, aralarında küçük bir boşluk bulunan 3 orta kutu elde etmek için ilk 2 kutuya kenar boşluğu eklemem gerekiyor gibi görünüyor.

Bu sadece Flexbox için kötü bir kullanım durumu mu? Çünkü basit kareler ve merkezleme kullanarak 3 kutuluğumu Flexbox'la oluştururken çok az avantaj görüyorum.

Burada bariz bir şey eksik miyim?

Answer 1

Hayır - hiçbir şey kaçırmıyorsunuz. Flexbox, elemanları sipariş etmek ve bu elemanların ana veya çapraz eksenler boyunca genel hizalamasını tanımlamak için müthiş bir özelliktir, ancak doğrudan bireysel öğe aralığıyla konuşmaz. If you take a look at this Codepen used in the Flexbox article, sen kullandıkları fark edeceksiniz:

margin-top: 10px 

öğeler arasındaki boşluk tanımlamak için. Bu yardımcı olur umarım! Uzay-between`:

Answer 2

.rope { 
 
    width: 393px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aquamarine; 
 
} 
 
.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 15px; 
 
    background: red; 
 
}

<div class='container'> 
 
    <div class='rope'> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>