CSS justify-self
La proprietà CSS3 justify-self allinea orizzontalmente un singolo elemento in una cella della griglia
Con justify-self puoi decidere come allineare orizzontalmente un singolo elemento all’interno della sua cella in un contenitore grid. È utile quando vuoi applicare un allineamento personalizzato a un solo item, sovrascrivendo l’impostazione generale di justify-items.
Sintassi
Significato dei valori principali:
-
start: allinea l’elemento all’inizio della cella orizzontalmente (a sinistra in layout LTR).
-
center: centra orizzontalmente l’elemento all’interno della cella.
-
end: allinea l’elemento alla fine della cella (a destra in layout LTR).
-
stretch: allarga l’elemento per riempire tutta la larghezza della cella (comportamento predefinito).
Esempio proprietà: justify-self
Codice Esempio: justify-self
.justify-self-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
background-color: #eee;
padding: 20px;
}.cell {
height: 100px;
background-color: #f6f8fa;
border: 2px dashed #aaa;
display: grid;
align-items: center;
}.cell > div {
background-color: #4078f2;
color: white;
padding: 10px 20px;
border-radius: 6px;
}.start div {
justify-self: start;
}.center div {
justify-self: center;
}.end div {
justify-self: end;
}
Contenuto Esempio: justify-self
Esempio di utilizzo di justify-self
In questo esempio, tre celle di griglia usano valori diversi di justify-self per dimostrare come ciascun elemento si allinea orizzontalmente in modo indipendente.
CSS e HTML per justify-self:
<style>
.cell {
display: grid;
align-items: center;
}
.start div { justify-self: start; }
.center div { justify-self: center; }
.end div { justify-self: end; }
</style>
<div class="cell start">
<div>Start</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
