CSS3 spaziatura Flexbox tra gli articoli

Question

Essendo un po 'nuovo per Flexbox (anche se con esperienza nei CSS), mi sembra che una cosa "sorvolare" comodamente dalla maggior parte dei tutorial che ho letto sia la spaziatura tra gli elementi flessibili.

Ad esempio, uno dei tutorial più citati è this one at CSS Tricks.

è molto buono ed è stato utile, diagrammi come questo mi hanno buttato fuori:

Nota gli spazi tra gli elementi di flessione. Sebbene non menzionato da nessuna parte, né nel codice di esempio, sembrerebbe che l'unico modo per ottenere gli spazi sia con i margini css.

Correggere o mi manca qualcosa di importante qui?

perché quello che ho bisogno di creare è questo, un po 'come la demo "centro" di cui sopra:

Tuttavia, quando provo io stesso, ho naturalmente ottenere questo:

se Uso lo spazio intorno, questo invece lo capisco. Spazio enorme

Pertanto, sembra che sia necessario aggiungere margine-destra alle prime 2 caselle per ottenere 3 caselle centrate con un piccolo spazio tra di esse.

È semplicemente un caso di utilizzo errato per Flexbox? Perché vedo poco vantaggio creare le mie 3 scatole con Flexbox usando margini e centraggi semplici.

Mi manca qualcosa di ovvio qui?

Answer 1

No, non ti manca nulla. Flexbox è formidabile per ordinare elementi e definire l'allineamento generale di questi elementi lungo l'asse principale o incrociato, ma non parla direttamente alla spaziatura individuale degli elementi. If you take a look at this Codepen used in the Flexbox article, noterete che usano:

margin-top: 10px 

per definire la spaziatura degli elementi. Spero che questo ti aiuti!

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>