Stedgenstande - CSS-tricks

Anonim

Den place-itemsejendom i CSS er forkortelse for align-itemsog justify-itemsegenskaber, der kombinerer dem i en enkelt erklæring.

En almindelig anvendelse er vandret og lodret centrering med Grid:

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

Disse egenskaber er blevet brugt med introduktionen af ​​Flexbox- og Grid-layout, men anvendes også til:

  • Kasser på blokniveau
  • Absolut placerede kasser
  • Statisk position af absolut placerede kasser
  • Bordceller

Syntaks

Ejendommen accepterer dobbeltværdier, den første for align-itemsog den anden for justify-items. Som en opdatering align-itemsjusterer indholdet langs den lodrette (kolonne) akse, mens den justify-itemsjusteres langs den vandrette (række) akse.

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

Dette er det samme som at skrive:

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

Hvis der kun angives en værdi, indstiller den begge egenskaber. For eksempel dette:

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

... er det samme som at skrive dette:

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

Accepterede værdier

Hvad der gør denne egenskab interessant er, at den opfører sig forskelligt ud fra den sammenhæng, den bruges. For eksempel gælder nogle værdier kun for Flexbox og fungerer ikke i en gitterindstilling. Derudover gælder nogle værdier for align-itemsejendommen, hvor andre gælder for justify-itemssiden.

Desuden kan værdierne i sig selv betragtes som faldende i en række typer tilpasning: kontekstuelle, fordeling, positionelle (som bliver selvpositionelle, hvis de anvendes direkte på et underordnet element i layoutet) og baseline.

Rachel Andrew har en fremragende Box Alignment snydeark, der hjælper med at illustrere effekten af ​​værdierne.

Værdi Type Beskrivelse
auto Kontekstuel Værdien justeres i overensstemmelse hermed baseret på elementets kontekst. Det bruger justify-itemsværdien af ​​elementets overordnede element. Hvis der ikke findes en forælder, eller hvis den anvendes på et element, der er placeret med absolute, bliver værdien normal.
normal Kontekstuel Udfører standardopførelsen for layoutkonteksten, hvor den anvendes.
• Layout på blokniveau: start
• Absolut positionering: startfor udskiftede absolutte elementer og stretchfor alle andre
• Tabellayouter: Værdi ignoreres
• Flexbox-layout: Værdi ignoreres
• Gitterlayouter: stretchmedmindre der anvendes et billedformat eller iboende størrelse, hvor det opfører sig synes godt omstart
stretch Fordeling Udvider elementet til begge kanter af beholderen lodret for align-itemsog vandret for justify-items.
start Positionel Alle elementer er justeret mod hinanden på beholderens startkant (venstre)
end Positionel Alle elementer er justeret mod hinanden på slutningens (højre) kant af containeren
center Positionel Elementer er justeret ved siden af ​​hinanden mod midten af ​​beholderen
left Positionel Elementer er justeret ved siden af ​​hinanden mod beholderens venstre side. Hvis ejendommen ikke er parallel med en standard øverste, højre, nederste, venstre akse, opfører den sig som end.
right Positionel Elementer er justeret ved siden af ​​hinanden mod beholderens højre side. Hvis ejendommen ikke er parallel med en standard øverste, højre, nederste, venstre akse, opfører den sig som start.
flex-start Positionel En kun flexbox-værdi (der falder tilbage til start) hvor genstande pakkes mod containerens startkant .
flex-end Positionel En kun flexbox-værdi (der falder tilbage til end), hvor genstande pakkes mod slutningskanten af ​​containeren.
self-start Selvpositionel Tillader, at et element i et layout justerer sig på containerens kant baseret på sin egen startside. Grundlæggende tilsidesætter, hvad den indstillede værdi er for forældrene.
self-end Selvpositionel Tillader, at et element i et layout justerer sig på containerens kant baseret på sin egen slutningsside i stedet for at arve containerens positionsværdi. Grundlæggende tilsidesætter, hvad den indstillede værdi er for forældrene.
first baseline
last baseline		 Baseline Justerer alle elementer i en gruppe (dvs. celler i en række) ved at matche deres justeringsbaselinjer. Som standard bruges firsthvis baselinedet bruges alene.

Browsersupport

Denne egenskab er inkluderet i CSS Box Alignment Model niveau 3-specifikationen.

Browsersupport er blevet ret bred og stort set bare anvendelig:

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

Referencer

  • CSS Box Alignment Model Level 3 - Den officielle specifikation, hvor place-itemsejendommen oprindeligt er defineret.
  • Mozilla Developer Network - Mozilla-teamets dokumentation.
  • Box Alignment Cheat Sheet - Rachel Andrews disposition er en super nyttig ressource til at forstå justeringsbetingelser og deres definitioner.