Proprietà CSS place-items
La proprietà place-items è una scorciatoia per align-items e justify-items. Scopri i valori e prova gli esempi.
La proprietà CSS place-items è una scorciatoia che imposta due proprietà di allineamento contemporaneamente:
- align-items — allineamento lungo l'asse block (in un layout predefinito, la direzione verticale/colonna).
- justify-items — allineamento lungo l'asse inline (in un layout predefinito, la direzione orizzontale/riga).
Invece di scrivere entrambe le proprietà, si scrive una sola dichiarazione place-items. Risulta particolarmente utile con i layout Grid, dove controlla come ogni elemento è posizionato all'interno della propria cella della griglia (le impostazioni di allineamento predefinite applicate a ogni elemento, equivalenti all'impostazione di place-self su ciascuno).
Questa pagina tratta la sintassi, le forme a uno e due valori, ogni valore con il suo significato pratico e i layout in cui place-items non ha effetto.
Quando si applica place-items?
place-items ha effetto solo nei layout che hanno un concetto di "elementi":
- Layout Grid — il caso d'uso principale. Allinea ogni elemento all'interno della propria area della griglia.
- Box con posizionamento assoluto — allinea il box all'interno del suo blocco contenitore.
Viene ignorato nei seguenti casi, che sono una fonte comune di confusione:
- Layout Flexbox —
justify-items(e quindi la metà inline diplace-items) non ha effetto in Flexbox. Usare invece justify-content ealign-itemsdirettamente. - Box block-level standard.
- Celle di tabella.
place-items si comporta in modo diverso a seconda del contesto di layout — lo stesso valore può significare cose diverse in Grid rispetto al posizionamento assoluto. La tabella dei valori qui sotto descrive ogni caso.
| Valore iniziale | normal legacy |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.placeItems = "normal"; |
Sintassi
place-items: <align-items> <justify-items>?;Le parole chiave accettate sono:
place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;Esistono due forme:
- Un valore — imposta entrambi gli assi.
place-items: center;significa "centra verticalmente e centra orizzontalmente." - Due valori — il primo imposta align-items (asse block), il secondo imposta justify-items (asse inline). Ad esempio,
place-items: start end;significa "in alto verticalmente, a destra orizzontalmente."
La specifica CSS Grid separa i due valori con uno spazio (place-items: start end), non con una barra. Nelle risorse più datate si può ancora trovare la barra; la forma a valore singolo è quella più sicura e più supportata.
Esempio — valore singolo (start)
Una singola parola chiave allinea gli elementi su entrambi gli assi contemporaneamente. Qui start spinge l'elemento nell'angolo in alto a sinistra della sua cella della griglia:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #1c87c9;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<h3>place-items: start</h3>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Risultato
Esempio — due valori (end start)
Con due parole chiave si controlla ogni asse in modo indipendente. Qui end start posiziona l'elemento in basso (asse block) e a sinistra (asse inline):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: end start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>place-items: end start</h2>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Esempio — valore center
Una singola parola chiave center centra ogni elemento sia verticalmente che orizzontalmente all'interno della sua cella della griglia:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
#container {
height: 200px;
width: 230px;
place-items: center;
background-color: #ccc;
display: grid;
}
.grid {
display: grid;
}
div > div {
box-sizing: border-box;
border: 3px solid #ccc;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #666;
min-height: 40px;
}
#box2 {
background-color: #1c87c9;
min-height: 50px;
}
#box3 {
background-color: #fff;
min-height: 40px;
}
#box4 {
background-color: #ff0000;
min-height: 60px;
}
#box5 {
background-color: #eee;
min-height: 70px;
}
#box6 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<div id="container" class="grid">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Se il box non ha un elemento padre, o è posizionato in modo assoluto, il valore "auto" equivale a "normal". |
| normal | L'effetto di questo valore dipende dalla modalità di layout: - Nei layout block-level il valore "normal" si comporta come "start". - Nei layout con posizionamento assoluto, questo valore si comporta come "start" per i box sostituiti con posizionamento assoluto, e come stretch per tutti gli altri box con posizionamento assoluto. - Nei layout con celle di tabella, questa proprietà viene ignorata. - Nei layout Flexbox, questa proprietà viene ignorata. - Nei layout Grid, questo valore si comporta come "stretch", tranne che per i box con un rapporto d'aspetto o dimensioni intrinseche, dove si comporta come "start". |
| start | Allinea l'elemento al bordo iniziale della sua area della griglia (in alto sull'asse block, a sinistra sull'asse inline in un layout da sinistra a destra). |
| end | Allinea l'elemento al bordo finale della sua area della griglia (in basso sull'asse block, a destra sull'asse inline in un layout da sinistra a destra). |
| self-start | All'elemento è consentito posizionarsi sul bordo del contenitore in base al proprio lato iniziale. |
| self-end | All'elemento è consentito posizionarsi sul bordo del contenitore in base al proprio lato finale. |
| center | Gli elementi sono posizionati uno accanto all'altro verso il centro del contenitore. |
| left | Gli elementi sono posizionati uno accanto all'altro verso il lato sinistro del contenitore. Se l'asse della proprietà non è parallelo all'asse inline, questo valore si comporta come "end". |
| right | Gli elementi sono posizionati uno accanto all'altro verso il lato destro del contenitore. Se l'asse della proprietà non è parallelo all'asse inline, questo valore si comporta come "start". |
| baseline | Allinea tutti gli elementi all'interno di un gruppo facendo corrispondere le loro linee di base di allineamento. |
| first baseline | Allinea la prima linea di base dell'elemento con la prima linea di base della riga. |
| last baseline | Allinea l'ultima linea di base dell'elemento con l'ultima linea di base della riga. |
| stretch | Estende l'elemento verso entrambi i bordi del contenitore verticalmente e orizzontalmente per adattarsi al contenitore. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
- align-items — la metà dell'asse block di questa scorciatoia.
- justify-items — la metà dell'asse inline di questa scorciatoia.
- grid — il layout in cui
place-itemsè più utile. - justify-content — la proprietà da usare in alternativa in Flexbox.