La differenza tra justify-self, justify-items e justify-content in CSS Grid

Sono veramente confuso. Quando si cercano risorse e documentazione online, la maggior parte della documentazione di queste proprietà sembra fare riferimento a Flex-box, non alla griglia. E non so quanto sia applicabile alla griglia la documentazione per le proprietà equivalenti in Flex-box.

Quindi, ho provato a fare riferimento a https://css-tricks.com/snippets/css/complete-guide-grid/ , che li definisce come segue:

justify-items – Allinea il contenuto all’interno di un elemento della griglia lungo l’asse delle righe

justify-content : questa proprietà allinea la griglia lungo l’asse della riga

justify-self : allinea il contenuto all’interno di un elemento della griglia lungo l’asse delle righe

Ma ancora non capisco quale sia la differenza tra loro. Quindi, ho 3 domande che voglio chiarire.

  1. La proprietà justify-items in Flex-box è uguale alla proprietà justify-items in Grid? o sono in qualche modo diversi? (In altre parole, posso riutilizzare la documentazione di Flex-box per Grid)
  2. Cosa fanno (giustificare) contenuti, sé e gli oggetti?
  3. In che modo (giustifichi) il contenuto, il sé e gli oggetti sono diversi?

Qualsiasi chiarimento sarebbe molto apprezzato.

Edit: Dato che tutti continuano a darmi risorse Flex-box, sto chiedendo di css-grid, NON flex-box.

Per rispondere alle tue domande:

1

Come indicato in reiallenramos, “Le proprietà justify-self e justify-item non sono implementate in flexbox. Ciò è dovuto alla natura unidimensionale della flexbox, e che potrebbero esserci più voci lungo l’asse, rendendo imansible giustificare un singolo Per allineare gli elementi lungo l’asse principale in linea in flexbox si utilizza la proprietà justify-content. ” – MDN

2-3

Questa schermata di W3 fa un ottimo lavoro nel mostrare ciò che fanno e le differenze tra loro. inserisci la descrizione dell'immagine qui

Buono a sapersi:

Per ulteriori informazioni ed esempi, ti suggerisco di controllare:

E per qualche ispirazione:

Principali differenze tra justify-content , justify-items e justify-self in CSS Grid:

  • La proprietà justify-content controlla l’allineamento delle colonne della griglia. È impostato sul contenitore della griglia . Non si applica o controlla l’allineamento degli elementi della griglia.
  • La proprietà justify-items controlla l’allineamento degli elementi della griglia. È impostato sul contenitore della griglia .
  • La proprietà justify-self sovrascrive justify-items su singoli elementi. È impostato sugli elementi della griglia e eredita il valore degli justify-items , per impostazione predefinita.

Esempio

Ecco una griglia 2×3.

  • 2 colonne, ciascuna larga 100 px
  • 3 file, ciascuna alta 50 px

Il contenitore è:

  • 500 px di larghezza
  • 250 px di altezza

inserisci la descrizione dell'immagine qui

 .container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 50px 50px 50px; width: 500px; height: 250px; grid-template-areas: " one two" " three four" " five six "; } .box:nth-child(1) { grid-area: one; } .box:nth-child(2) { grid-area: two; } .box:nth-child(3) { grid-area: three; } .box:nth-child(4) { grid-area: four; } .box:nth-child(5) { grid-area: five; } .box:nth-child(6) { grid-area: six; } /* non-essential decorative styles */ body { display: flex; justify-content: center; } .container { background-color: #ddd; border: 1px solid #aaa; } .box { background-color: lightgreen; border: 1px solid gray; display: flex; justify-content: center; align-items: center; font-size: 1.2em; } 
 
1
2
3
4
5
6

OK, penso di aver capito grazie a Michael_B. La mia confusione deriva dal fatto che a volte diverse proprietà non cambiano casualmente nulla sul layout della griglia.

justify-content ti permette di posizionare la griglia all’interno del suo contenitore della griglia. Questo è il motivo per cui la proprietà justify-content non avrà alcun effetto se il grid-container ha le stesse dimensioni della griglia. (Che è sempre il caso se usi fr unit). Questo è anche il motivo per cui può avere i valori: spazio-intorno, spazio-spazio e spazio-uniforms (oltre a inizio, fine, centro e allungamento), che interromperà la griglia e posizionerà gli elementi della griglia all’interno del contenitore della griglia. Questa è una proprietà del contenitore della griglia .

justify-items ti consente di impostare una posizione di default per il contenuto inserito negli elementi della griglia della griglia (una griglia è una casella nella griglia, come definito nel post di Michael_B). Questa è una proprietà del contenitore della griglia .

justify-self ti consente di sovrascrivere la posizione predefinita del contenuto in una singola cella. Questo sovrascriverà la posizione impostata da elementi giustificativi. Quindi, se si utilizza justify-self su tutti i figli del contenitore, l’impostazione degli elementi di giustificazione sul contenitore della griglia non avrà alcun effetto. Questa è una proprietà del contenuto all’interno di un elemento della griglia .

Nota: se si crea una griglia una voce stessa, (in altre parole, il contenuto all’interno di una griglia è una griglia), è ansible posizionarlo all’interno della griglia esterna utilizzando la proprietà justify-self o il giustificato-contenuto proprietà sul contenitore della griglia della griglia interna, poiché il contenitore della griglia della griglia interna è uno dei contenuti degli elementi della griglia della griglia esterna.

Come ci si potrebbe aspettare, tutto ciò si applica anche alle proprietà align- *.

Per favore correggimi se ho qualcosa di sbagliato

Justify-self serve per allineare orizzontalmente la posizione del contenuto all’interno della sua cella.

Mentre align-self serve per allineare verticalmente la posizione del contenuto all’interno della sua cella.

Ecco il risultato per allineare gli oggetti usando justify-self: start;

IL RISULTATO DEL CODICE justify-self: start;