CSS - modo migliore per impostare la distanza tra gli elementi Flexbox

Esistono due metodi più comunemente usati per impostare la distanza tra gli elementi Flexbox, i.e., L'uso della proprietà CSS di giustificazione con la proprietà spaziale e con la proprietà spaziale. Quando il "giustificare il contenuto"La proprietà CSS è impostata su"Spazio-around", Aggiunge spazio attorno a ogni elemento Flexbox dell'elemento HTML. Tuttavia, quando il suo valore è impostato come "spaziale", Aggiunge spazio tra gli elementi dell'elemento HTML.

Questo articolo dimostrerà l'uso dei valori "spaziali" e "spazia.

Come impostare la distanza tra gli elementi Flexbox?

La sintassi per definire il "giustificare il contenuto"Per impostare spazio intorno e tra gli elementi Flexbox è il seguente:

Giustify-Content: spazio; Giustify-Content: spazio-spazio;

Prerequisito: creazione di elementi Flexbox

Per impostare la distanza tra gli elementi Flexbox, è prima necessario per creare un Flexbox con gli elementi Flexbox e quindi applicare le proprietà CSS su di esso.

Esempio

Aggiungiamo un elemento del contenitore Div per creare il Div principale e quindi alcuni elementi DIV al suo interno per creare gli elementi Flexbox:

UN
B
C
D

Nel frammento di codice aggiunto sopra:

• UN "div"L'elemento container è stato aggiunto con la classe dichiarata come"flettere".
• All'interno di ciò, vengono aggiunti altri quattro elementi del contenitore div ciascuno con il nome di classe dichiarato "articolo".
• Gli elementi Div hanno il testo "UN","B","C" E "D"Scritto su di loro.

L'elemento in stile CSS conterrà alcune proprietà per fare una visualizzazione migliore degli elementi Flexbox:

.flettere

display: flex;
Altezza: 50vh;
ALIGE-ITMS: CENTRO;

.articolo

larghezza: 40px;
Altezza: 40px;
Background-color: Powderblue;
Testo-align: centro;
imbottitura: 25px;

Nel frammento di codice sopra, sono state aggiunte le seguenti proprietà CSS:

• IL "Schermo"La proprietà è stata definita come"flettere"Per allineare correttamente il testo all'interno del contenitore Div.
• IL "altezzaLa proprietà "è stata impostata su"50vh"Per impostare la lunghezza verticale dell'elemento del contenitore div.
• IL "allineare"La proprietà è definita come centrata per allineare l'elemento Div al centro.
• Dopo il ".flettere"Selettore di classe, il".articolo"Viene aggiunto il selettore di classe che ha le proprietà CSS per gli elementi all'interno del contenitore principale.
• IL "larghezzaLa proprietà "è definita come"40px"Per impostare la lunghezza orizzontale di ciascuno degli elementi Flexbox.
• IL "altezza"Degli elementi Flexbox è impostato su"40px".
• IL "colore di sfondo"Degli elementi Flexbox è definito come"polvere".
• IL "allineamento"Il centro è stato definito come"centro"Per allineare gli alfabeti scritti all'interno degli elementi Flexbox al centro.
• IL "imbottitura"La proprietà è stata definita come"25px"Per definire la distanza tra il contenuto e il bordo.

Lo snippet di codice sopra genere genererà il seguente output:

Ora, è necessario impostare la distanza tra gli elementi Flexbox creati.

Metodo 1: Definire la proprietà "Justify-Content" come "Space-Around"

Uno dei metodi è aggiungere il "Justify-Property"E definiscilo come"Spazio-around"Per aggiungere gli spazi o la distanza attorno a ciascun elemento Flexbox:

.flettere

Giustify-Content: spazio;
..

.articolo

..

L'esempio del codice sopra indica che esiste l'aggiunta di "giustificare il contenuto"Proprietà che è stata definita come"Spazio-around". I punti indicano che tutte le proprietà rimangono le stesse qui aggiunte sopra nella sezione prerequisito di questo post.

Di conseguenza, lo spazio definito verrà aggiunto attorno agli elementi Flexbox:

Metodo 2: Definire la proprietà "giustificati" come "spazio"

L'altro metodo è aggiungere il "Justify-Property"E definiscilo come"spaziale"Per aggiungere gli spazi o la distanza tra ogni elemento Flexbox:

.flettere

Giustify-Content: spazio-spazio;
..

.articolo

..

L'esempio sopra indica che esiste l'aggiunta di "Giustify-Content: spaziale"E tutte le proprietà CSS rimangono le stesse anche qui.

L'esempio sopra aggiungerà la distanza tra ogni elemento Flexbox. Tuttavia, non ci sarà distanza tra l'oggetto più a sinistra e più a destra e il contenitore Div perché aggiunge solo la distanza tra gli elementi Flexbox a differenza di "Spazio-around":

Questo riassume i due diversi metodi per impostare la distanza tra gli elementi Flexbox.

Conclusione

Per impostare la distanza tra gli elementi FlexBox, aggiungere il selettore ID o classe nell'elemento stile CSS che si riferisce all'elemento genitore in cui sono stati creati tutti gli elementi Flexbox e quindi definire il "Giustify-Content: spaziale"Proprietà come entrambi"Spazio-around" O "spaziale". Questa guida del blog sui metodi per impostare la distanza tra gli elementi Flexbox.