Spaziatura Flexbox CSS3 tra gli articoli

Essendo un po ‘nuovo a Flexbox (anche se con esperienza nei CSS), mi sembra che una cosa che è stata opportunamente “sorvolata” dalla maggior parte dei tutorial che ho letto è la spaziatura tra gli elementi flessibili.

Ad esempio, uno dei tutorial più citati è questo in CSS Tricks .

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

inserisci la descrizione dell'immagine qui

Notare gli spazi tra gli elementi flessibili. 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.

Corretto, o mi sto perdendo qualcosa di importante qui?

Perché quello che ho bisogno di creare è questo, molto simile alla demo “centro” qui sopra: inserisci la descrizione dell'immagine qui

Tuttavia, quando provo me stesso, ovviamente ottengo questo: inserisci la descrizione dell'immagine qui

se uso lo spazio-intorno, ottengo questo. Spazio enorme inserisci la descrizione dell'immagine qui

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

Questo è semplicemente un caso di cattivo uso per Flexbox? Perché vedo poco vantaggio creare le mie 3 scatole con Flexbox usando margini e centraggi semplici.

Mi sto perdendo qualcosa di ovvio qui?

No, non ti manca niente. 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. Se dai un’occhiata a questo Codepen usato nell’articolo di Flexbox , noterai che usano:

margin-top: 10px 

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

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