trick - justify content between css




La differenza tra giustificazione di sé, elementi di giustificazione e contenuto di giustificazione nella griglia CSS (3)

Per rispondere alle tue domande:

1

Come menzionato da reiallenramos, "Le proprietà giustificare-sé e giustificare-articoli non sono implementate in flexbox. Ciò è dovuto alla natura monodimensionale di flexbox e che possono esserci più elementi lungo l'asse, rendendo impossibile giustificare un singolo elemento. Per allineare gli elementi lungo l'asse principale, inline in flexbox, utilizzare la proprietà - MDN

2-3

Questa schermata di W3 fa un ottimo lavoro nel mostrare cosa fanno e le differenze tra loro.

Buono a sapersi:

Per ulteriori informazioni ed esempi, ti suggerisco di dare un'occhiata:

E per qualche ispirazione:

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 della riga

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 della riga

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 diversi in qualche modo? (In altre parole, posso riutilizzare la documentazione Flex-box per Grid)
  2. Cosa fanno (giustificano-) il contenuto, il sé e gli oggetti?
  3. In che modo (giustificano-) il contenuto, il sé e gli elementi sono diversi?

Qualsiasi chiarimento sarebbe molto apprezzato.

Modifica: dal momento che tutti continuano a darmi risorse Flex-box, chiedo di css-grid, NON di flex-box.


OK, penso di averlo capito grazie a Michael_B. La mia confusione derivava dal fatto che a volte proprietà diverse non cambiavano in modo casuale il layout della griglia.

justify-content consente di posizionare la griglia all'interno del relativo contenitore della griglia. Questo è il motivo per cui la proprietà justify-content non avrà alcun effetto se il contenitore della griglia ha le stesse dimensioni della griglia. (Che è sempre il caso se si usano le unità fr). Questo è anche il motivo per cui può avere i valori: spazio intorno, spazio tra e spazio uniformemente (Oltre a inizio, fine, centro e stiramento), che spezzerà la griglia e posizionerà gli elementi della griglia all'interno del contenitore della griglia. Questa è una proprietà del contenitore della griglia .

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

justify-self consente di sovrascrivere la posizione predefinita del contenuto in una singola cella. Ciò sovrascriverà la posizione impostata da justify-items. Pertanto, se si utilizza il giustificativo su tutti i figli del contenitore, l'impostazione degli elementi giustificati sul contenitore della griglia non avrà alcun effetto. Questa è una proprietà del contenuto all'interno di un elemento della griglia .

Nota: se si trasforma un elemento griglia in una griglia stessa (in altre parole, il contenuto all'interno di un elemento griglia è una griglia), è possibile posizionarlo all'interno dell'elemento griglia esterno utilizzando la proprietà self-justify o il 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 prevedibile, tutto ciò vale anche per le proprietà align- *.

Per favore, correggimi se ho sbagliato qualcosa


Justify-self serve ad allineare la posizione del contenuto all'interno della sua cella in senso orizzontale .

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

Ecco il risultato per l'allineamento degli elementi usando justify-self: start;

IL RISULTATO DEL CODICE justify-self: start;







css-grid