Plaats-items - CSS-trucs

De place-itemseigenschap in CSS is een afkorting voor de align-itemsen justify-itemseigenschappen, waarbij ze worden gecombineerd tot één declaratie.

Een veelvoorkomend gebruik is horizontaal en verticaal centreren met Grid:

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

Deze eigenschappen hebben met de introductie van Flexbox- en Grid-lay-outs hun nut gewonnen, maar worden ook toegepast op:

• Dozen op blokniveau
• Absoluut gepositioneerde dozen
• Statische positie van absoluut gepositioneerde dozen
• Tabelcellen

Syntaxis

De eigenschap accepteert dubbele waarden, de eerste voor align-itemsen de tweede voor justify-items. Als een opfriscursus wordt de align-itemsinhoud uitgelijnd langs de verticale (kolom) as, terwijl deze wordt justify-itemsuitgelijnd langs de horizontale (rij) as.

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

Dit is hetzelfde als schrijven:

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

Als er slechts één waarde is opgegeven, worden beide eigenschappen ingesteld. Dit is bijvoorbeeld:

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

... is hetzelfde als dit schrijven:

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

Geaccepteerde waarden

Wat deze eigenschap interessant maakt, is dat het zich anders gedraagt ​​op basis van de context waarin het wordt gebruikt. Sommige waarden zijn bijvoorbeeld alleen van toepassing op Flexbox en werken niet in een Grid-instelling. Bovendien zijn sommige waarden van toepassing op de align-itemseigenschap, terwijl andere van toepassing zijn op de justify-itemszijkant.

Verder kunnen de waarden zelf worden gezien als vallend in een aantal soorten uitlijning: contextueel, distributie, positioneel (dat zelfpositioneel wordt als het direct wordt toegepast op een kindelement in de lay-out) en basislijn.

Rachel Andrew heeft een uitstekend spiekbriefje voor Box Alignment dat het effect van de waarden helpt illustreren.

Waarde	Type	Omschrijving
auto	Contextueel	De waarde wordt dienovereenkomstig aangepast op basis van de context van het element. Het gebruikt de justify-itemswaarde van het bovenliggende element van het element. Als er geen ouder bestaat of het wordt toegepast op een element dat is gepositioneerd met absolute, wordt de waarde normal.
normal	Contextueel	Neemt het standaardgedrag over van de lay-outcontext waarop het wordt toegepast. • Block-level lay-outs: start • Absolute positionering: startvoor het vervangen absolute elementen en stretchvoor alle anderen • Table layouts: Waarde wordt genegeerd • Flexbox layouts: Waarde wordt genegeerd • Grid-outs: stretch, tenzij een beeldverhouding of intrinsieke sizing wordt gebruikt wanneer het zich gedraagt Leuk vindenstart
stretch	Distributie	Zet het element verticaal voor aan beide randen van de container align-itemsen horizontaal voor justify-items.
start	Positioneel	Alle elementen zijn tegen elkaar uitgelijnd aan de startrand (links) van de container
end	Positioneel	Alle elementen zijn tegen elkaar uitgelijnd aan de (rechter) eindrand van de container
center	Positioneel	Items worden naast elkaar uitgelijnd naar het midden van de container
left	Positioneel	Items worden naast elkaar uitgelijnd aan de linkerkant van de container. Als de eigenschap niet parallel is aan een standaard boven-, rechter-, onder-, linkeras, dan gedraagt ​​het zich als end.
right	Positioneel	Items worden naast elkaar uitgelijnd aan de rechterkant van de container. Als de eigenschap niet parallel is aan een standaard boven-, rechter-, onder-, linkeras, dan gedraagt ​​het zich als start.
flex-start	Positioneel	Een flexbox-only waarde (die terugvalt start) waar items worden verpakt richting de beginrand van de container.
flex-end	Positioneel	Een flexbox-only-waarde (die terugvalt end) waar items worden verpakt naar de eindrand van de container.
self-start	Zelf positioneel	Hiermee kan een item in een lay-out zichzelf uitlijnen op de rand van de container op basis van zijn eigen beginzijde. Overschrijft in feite wat de ingestelde waarde op de ouder is.
self-end	Zelf positioneel	Hiermee kan een item in een lay-out zichzelf uitlijnen op de containerrand op basis van zijn eigen eindzijde in plaats van de positiewaarde van de container over te nemen. Overschrijft in feite wat de ingestelde waarde op de ouder is.
first baseline last baseline	Basislijn	Lijnt alle elementen binnen een groep (dwz cellen in een rij) uit door hun uitlijningsbasislijnen op elkaar af te stemmen. De standaardinstelling is firstif baselinewordt op zichzelf gebruikt.

Browser-ondersteuning

Deze eigenschap is opgenomen in de CSS Box Alignment Model Level 3-specificatie.

Browserondersteuning is behoorlijk breed geworden en grotendeels gewoon bruikbaar:

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

Referenties

• CSS Box Alignment Model Level 3 - De officiële specificatie waar de place-itemseigenschap in eerste instantie is gedefinieerd.
• Mozilla Developer Network - De documentatie van het Mozilla-team.
• Box Alignment Cheat Sheet - De opzet van Rachel Andrew is een super handig hulpmiddel voor het begrijpen van uitlijningstermen en hun definities.