Platsartiklar - CSS-tricks

Den place-itemsegendom i CSS är en förkortning för align-itemsoch justify-itemsegenskaper, kombinera dem till en enda förklaring.

En vanlig användning är att göra horisontell och vertikal centrering med Grid:

.center-inside-of-me ( display: grid; place-items: center; )

Dessa egenskaper har fått användning med introduktionen av Flexbox- och Grid-layouter, men tillämpas också på:

• Lådor på blocknivå
• Absolut placerade lådor
• Statisk position av absolut placerade lådor
• Tabellceller

Syntax

Egenskapen accepterar dubbla värden, det första för align-itemsoch det andra för justify-items. Som en uppdatering, align-itemsjusterar innehållet längs den vertikala (kolumn) axeln medan den justify-itemsjusteras längs den horisontella (raden) axeln.

.item ( display: grid; place-items: start center; )

Detta är detsamma som att skriva:

.item ( display: grid; align-items: start; justify-items: center; )

Om bara ett värde anges, anger det båda egenskaperna. Till exempel detta:

.item ( display: grid; place-items: start; )

... är detsamma som att skriva detta:

.item ( display: grid; align-items: start; justify-items: start; )

Accepterade värden

Vad som gör den här egenskapen intressant är att den beter sig annorlunda utifrån det sammanhang den används. Vissa värden gäller till exempel bara Flexbox och fungerar inte i rutnätinställning. Dessutom gäller vissa värden för align-itemsegenskapen där andra gäller för justify-itemssidan.

Vidare kan värdena själva betraktas som att de faller in i ett antal typer av inriktning: kontextuell, distribution, positionell (som blir självpositionell om den direkt tillämpas på ett barnelement i layouten) och baslinjen.

Rachel Andrew har en utmärkt Box Alignment fuskark som hjälper till att illustrera effekten av värdena.

Värde	Typ	Beskrivning
auto	Kontextuell	Värdet justeras därefter baserat på elementets sammanhang. Det använder justify-itemsvärdet av elementets överordnade element. Om det inte finns någon överordnad eller om den tillämpas på ett element som placeras med absoluteblir värdet normal.
normal	Kontextuell	Tar standardbeteendet för layoutkontexten där den tillämpas. • Layouter på blocknivå: start • Absolut positionering: startför ersatta absoluta element och stretchför alla andra • Tabelllayouter: Värde ignoreras • Flexbox-layouter: Värde ignoreras • Rutnätlayouter: om stretchinte ett bildförhållande eller inneboende storlek används där det beter sig tycka omstart
stretch	Distribution	Expanderar elementet till båda kanterna på behållaren vertikalt för align-itemsoch horisontellt för justify-items.
start	Positionell	Alla element är inriktade mot varandra på behållarens startkant (vänster)
end	Positionell	Alla element är inriktade mot varandra på behållarens slutkant (högra)
center	Positionell	Objekt är inriktade bredvid varandra mot behållarens mitt
left	Positionell	Objekt är inriktade bredvid varandra mot behållarens vänstra sida. Om egenskapen inte är parallell med en vanlig topp-, höger-, botten-, vänsteraxel, beter sig den som end.
right	Positionell	Objekt är inriktade bredvid varandra mot behållarens högra sida. Om egenskapen inte är parallell med en vanlig topp-, höger-, botten-, vänsteraxel, beter sig den som start.
flex-start	Positionell	Ett endast flexbox-värde (som faller tillbaka till start) där föremål packas mot behållarens startkant.
flex-end	Positionell	Ett enda flexbox-värde (som faller tillbaka till end) där föremål packas mot behållarens slutkant.
self-start	Självpositionering	Låter ett objekt i en layout anpassa sig mot behållarens kant baserat på sin egen startsida. I grund och botten åsidosätter det inställda värdet på föräldern.
self-end	Självpositionering	Låter ett objekt i en layout anpassa sig mot behållarens kant utifrån sin egen ändsida istället för att ärva behållarens positionsvärde. I grund och botten åsidosätter det inställda värdet på föräldern.
first baseline last baseline	Baslinje	Justerar alla element i en grupp (dvs. celler inom en rad) genom att matcha deras inriktningsbaslinjer. Standardinställningen är firstom den baselineanvänds ensam.

Webbläsarstöd

Den här egenskapen ingår i specifikationen CSS Box Alignment Model Level 3.

Webbläsarstödet har blivit ganska brett och i stort sett bara användbart:

• Edge 79+ (Post Chromium transision)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referenser

• CSS Box Alignment Model Level 3 - Den officiella specifikationen där place-itemsegenskapen ursprungligen definierades.
• Mozilla Developer Network - Mozilla-teamets dokumentation.
• Box Alignment Cheat Sheet - Rachel Andrews disposition är en super hjälpsam resurs för att förstå justeringsvillkor och deras definitioner.