CSS - place-content: Una Guida Amichevole per i Principianti

Ciao ciao, futuro supereroe del design web! ? Pronto a tuffarti nel meraviglioso mondo del CSS? Oggi, esploreremo una piccola proprietà chiamata place-content.蒂 trust me, è gonna rendere la tua vita così tanto più facile quando cerchi di allineare le cose nei tuoi layout web. Allora, prenditi una tazza di caffè (o tè, se è più il tuo thing), e iniziamo!

Cos'è place-content?

Immagina di stanno sistemando i mobili in una stanza. Vuoi che tutto sembri perfetto, ma spostare ogni pezzo individualmente è un fastidio. Ecco dove entra in gioco place-content - è come avere una bacchetta magica che ti aiuta a sistemare gli elementi nella tua pagina web con facilità!

La proprietà place-content è un abbreviazione per impostare sia align-content che justify-content in una volta sola. È come uccidere due uccelli con una pietra (ma non preoccuparti, nessun uccello è stato ferito nella creazione di questa proprietà CSS ?).

Valori Possibili

Oh boy, abbiamo molte opzioni qui! Ecco un elenco chiaro e facile da leggere:

Valore	Descrizione
center	Centra il contenuto sia verticalmente che orizzontalmente
start	Allinea il contenuto all'inizio del contenitore
end	Allinea il contenuto alla fine del contenitore
flex-start	Simile a start, ma per contenitori flex
flex-end	Simile a end, ma per contenitori flex
baseline	Allinea il contenuto lungo la baseline
space-between	Distribuisce gli elementi uniformemente con spazio tra di loro
space-around	Distribuisce gli elementi uniformemente con spazio intorno a loro
space-evenly	Distribuisce gli elementi con spazio uguale tra e intorno a loro

Non preoccuparti se queste sembrano schiaccianti - esamineremo ognuna con esempi!

Applica A

Prima di immergerci nei dettagli, è importante sapere dove possiamo usare place-content. Questa proprietà si applica a:

• Contenitori Grid
• Contenitori Flex

Quindi, se stai lavorando con griglie o flexbox (che,相信我, lo farai), place-content è il tuo nuovo migliore amico!

Sintassi

La sintassi di base per place-content è super semplice:

.container {
place-content: <align-content> <justify-content>;
}

Puoi usare uno o due valori. Se usi uno, si applica ad entrambe le direzioni di allineamento. Se usi due, il primo è per align-content (allineamento verticale) e il secondo è per justify-content (allineamento orizzontale).

Ora, vediamo alcuni esempi specifici!

CSS place-content - center start Valore

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

In questo esempio, il contenuto sarà centrato verticalmente ma allineato all'inizio (sinistra in lingue da sinistra a destra) orizzontalmente. È come spingere tutti i mobili da un lato della stanza ma tenerli al centro verticalmente.

CSS place-content - start center Valore

.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}

Qui, facciamo il contrario - allineiamo il contenuto in alto ma lo centriamo orizzontalmente. Immagina di allineare tutti i mobili lungo il muro superiore ma spaziandoli uniformemente da sinistra a destra.

CSS place-content - end right Valore

.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}

Questo spingerà tutto il contenuto nell'angolo in basso a destra del contenitore. È come spingere tutti i mobili in un angolo della stanza (non che ti consiglio di fare così nella vita reale ?).

CSS place-content - flex-start center Valore

.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}

Simile a start center, ma specificamente per contenitori flex. Il tuo contenuto sarà in alto (o sinistra nella direzione della colonna) e centrato orizzontalmente.

CSS place-content - flex-end center Valore

.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}

Questo è come flex-start center, ma allinea all'estremità del contenitore flex invece che all'inizio.

CSS place-content - last baseline Valore

.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}

Questo è un po' tricky. Allinea il contenuto lungo la baseline dell'ultima riga di testo. È come assicurarsi che tutto il testo si sieda su una linea invisibile.

CSS place-content - space-between Valore

.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}

Questo distribuisce gli elementi uniformemente, con il primo elemento all'inizio e l'ultimo alla fine. Immagina di piazzare i mobili in una stanza con spazio uguale tra ogni pezzo, ma spinti ai bordi.

CSS place-content - space-around Valore

.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}

Simile a space-between, ma aggiunge anche spazio prima del primo e dopo l'ultimo elemento. È come dare a ogni pezzo di mobile la sua piccola area nella stanza.

CSS place-content - space-evenly Valore

.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}

Questo distribuisce gli elementi con spazio uguale tra e intorno a loro. È il metodo più bilanciato, come spaziare i mobili perfettamente nella stanza.

Eccoci! Hai appena imparato sulla proprietà place-content e i suoi vari valori. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi nei tuoi progetti. Prima di sapere, sarai allineando il contenuto come un professionista!

Continua a codificare, continua a imparare, e, cosa più importante, divertiti! ??‍??‍?

Credits: Image by storyset