Differenza tra giustificare il contenuto e allineare

Quando si crea un sito Web, è necessario prendere in considerazione il layout dell'elemento. IL "Visualizza flex"La proprietà in CSS rende flessibile l'elemento e il suo contenuto è giustificato e allineato facilmente se il contenuto non utilizza tutto lo spazio disponibile. IL "giustificare il contenuto"La proprietà specifica gli elementi sull'asse X, mentre il"allineare"La proprietà allinea gli articoli all'asse Y.

Questo manuale dimostrerà la differenza tra "giustificare il contenuto" E "allineare"Del contenitore flessibile.

Differenza tra "giustificare il contenuto" e "allineare" in CSS

Il CSS "giustificare il contenuto"La proprietà specifica il modo in cui il browser alloca lo spazio tra e intorno agli elementi di contenuto lungo un asse principale del contenitore flessibile e un asse in linea del contenitore a griglia. Comunque, il "allineare"Le proprietà impostano gli elementi sull'asse y in Flexbox. Nel layout della griglia, imposta l'allineamento dei contenuti sull'asse del blocco.

Valori per la proprietà "giustificati-contenuti"

IL "giustificare il contenuto"La proprietà può avere valori elencati di seguito:

• centro
• spaziale
• Spazio-unitamente
• Spazio-around
• Flex-Start
• Flex-end
• iniziale
• Ereditare

Valori per la proprietà "align-eleds"

IL "allineare"La proprietà può avere valori elencati di seguito:

• centro
• stirata
• basale
• Flex-Start
• Flex-end
• iniziale
• Ereditare

Come giustificare il contenuto con CSS?

Per giustificare il contenuto in HTML utilizzando CSS, il “giustificare il contenuto" E "allineare"Vengono utilizzate le proprietà. Per la dimostrazione, abbiamo fornito l'esempio in cui il principale "div"Viene applicato con la proprietà"Schermo"Valore come"flettere". Questa proprietà farà il “div"Flessibile ai suoi articoli. L'altra scatola all'interno del principale "div"La scatola sarà giustificata e allineata in base ai valori.

Seguire i passaggi dichiarati per una migliore comprensione.

Passaggio 1: crea la pagina HTML

Innanzitutto, crea una pagina HTML e aggiungi i seguenti elementi:

• Aggiungere un ""Elemento con il nome della classe"scatola".
• All'interno questo ""Container, aggiungi un altro" "e assegnalo una classe"Box-1":

Passaggio 2: Stile Primo elemento "div"

Per lo stile del primo "div"Elemento, accedilo in CSS con l'aiuto della classe assegnata".scatola". Quindi, applica le proprietà sotto codifica:

.scatola
Bordo: 2px Blueviolet solido;
larghezza: 500px;
Altezza: 250px;
Margine: 40px Auto;
display: flex;

Ecco l'elaborazione dello snippet sopra:

• "confine"La proprietà viene utilizzata per regolare il bordo attorno a div.
• "larghezza"Proprietà con un valore di"500px"Imposta la larghezza della scatola div.
• "altezza"La proprietà imposta l'altezza del" div "a"250px".
• "margine"Specifica uno spazio di"40px"In alto e in basso.
• "Schermo"La proprietà imposta il comportamento del display. Il valore "flettere"Rende questo div flessibile ai suoi articoli.

Passaggio 3: Stile Secondo elemento "div"

Accedi a un secondo "div"Attraverso la classe assegnata".Box-1"E applica il seguente CSS:

.Box-1
larghezza: 100px;
Altezza: 100px;
Background-color: cioccolato;

IL "larghezza" E "altezza"Le proprietà vengono applicate. Poi il "colore di sfondo"La proprietà si applica per impostare il colore sullo sfondo dell'elemento:

Passaggio 4: applicare la proprietà "giustificati-contenuti"

Per giustificare il contenuto, abbiamo applicato il "giustificare il contenuto"Proprietà come"centro"Sul principale"div". Questa proprietà allinea il suo contenuto in base al valore che gli è stato dato:

.scatola
Bordo: 2px Blueviolet solido;
larghezza: 500px;
Altezza: 250px;
Margine: 40px Auto;
display: flex;
giustificare contento: centro;

Dall'immagine seguente, può osservare che il principale "div"Allinea il suo contenuto"Box-1"Div al centro sull'asse X:

Passaggio 5: applicare la proprietà "Allinee-eleds"

IL "allineare"Le proprietà impostano gli elementi sull'asse y in Flexbox. Nel CSS, abbiamo aggiunto la proprietà "Allinee-eleds" come "centro"Per allineare il contenuto al centro lungo l'asse Y:

.scatola
Bordo: 2px Blueviolet solido;
larghezza: 500px;
Altezza: 250px;
Margine: 40px Auto;
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

Puoi vederlo, abbiamo giustificato con successo il contenuto con CSS:

Abbiamo dimostrato la differenza tra il contesto giustificato e l'allineamento e come usarli per giustificare il contenuto.

Conclusione

Le proprietà "giustificare il contenuto" E "allineare"Vengono utilizzati per specificare come il browser visualizza il contenuto. La proprietà giustificata-contenuto aggiunge i margini intorno e tra gli articoli lungo l'asse X del contenitore flessibile e l'asse in linea del contenitore della griglia. Comunque, il "allineare"Le proprietà impostano gli elementi sull'asse y in Flexbox. Questo post ha elaborato la differenza tra il contesto giustificato e l'allineamento e come usarli per giustificare il contenuto.