Sted-artikler - CSS-triks

Den place-itemseiendom i CSS er kortform for align-itemsog justify-itemsegenskaper, og kombinerer dem i en enkelt erklæring.

En vanlig bruk er å gjøre horisontal og vertikal sentrering med Grid:

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

Disse egenskapene har fått bruk med introduksjonen av Flexbox- og Grid-oppsett, men brukes også til:

• Bokser på blokknivå
• Absolutt posisjonerte bokser
• Statisk posisjon av absolutt posisjonerte bokser
• Bordceller

Syntaks

Eiendommen godtar to verdier, den første for align-itemsog den andre for justify-items. Som en forfriskning, align-itemsjusterer innholdet langs den vertikale (kolonne) aksen, mens den justify-itemsjusteres langs den horisontale (rad) aksen.

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

Dette er det samme som å skrive:

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

Hvis bare en verdi er gitt, angir den begge egenskapene. For eksempel dette:

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

... er det samme som å skrive dette:

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

Aksepterte verdier

Det som gjør denne egenskapen interessant, er at den oppfører seg annerledes basert på konteksten den brukes. For eksempel gjelder noen verdier bare for Flexbox og fungerer ikke i rutenettinnstilling. I tillegg gjelder noen verdier for align-itemseiendommen der andre gjelder for justify-itemssiden.

Videre kan verdiene i seg selv tenkes å falle inn i en rekke typer justering: kontekstuell, distribusjon, posisjonell (som blir selvposisjonell hvis den brukes direkte på et barnelement i oppsettet) og baseline.

Rachel Andrew har et utmerket jukseark fra Box Alignment som hjelper til med å illustrere effekten av verdiene.

Verdi	Type	Beskrivelse
auto	Kontekstuell	Verdien justeres deretter basert på elementets kontekst. Den bruker justify-itemsverdien av elementets overordnede element. Hvis ikke foreldre eksisterer eller det brukes på et element som er posisjonert med absolute, blir verdien normal.
normal	Kontekstuell	Tar standardoppførselen til layoutkonteksten der den brukes. • Oppsett på blokknivå: start • Absolutt posisjonering: startfor erstattede absolutte elementer og stretchfor alle andre • Tabelloppsett: Verdi ignoreres • Flexbox-oppsett: Verdi ignoreres • Rutenettoppsett :, stretchmed mindre et sideforhold eller egen størrelse brukes der den oppfører seg somstart
stretch	Fordeling	Utvider elementet til begge kantene av beholderen vertikalt for align-itemsog horisontalt for justify-items.
start	Posisjonell	Alle elementene er justert mot hverandre på startkanten (venstre) av beholderen
end	Posisjonell	Alle elementene er justert mot hverandre på endekanten (høyre) av beholderen
center	Posisjonell	Elementer er justert ved siden av hverandre mot midten av beholderen
left	Posisjonell	Elementene er justert ved siden av hverandre mot venstre side av containeren. Hvis egenskapen ikke er parallell med en standard topp, høyre, bunn, venstre akse, oppfører den seg som end.
right	Posisjonell	Elementene er justert ved siden av hverandre mot beholderens høyre side. Hvis egenskapen ikke er parallell med en standard topp, høyre, bunn, venstre akse, oppfører den seg som start.
flex-start	Posisjonell	En eneste verdi for flexbox (som faller tilbake til start) der gjenstander pakkes mot startkanten av containeren.
flex-end	Posisjonell	En eneste verdi for fleksboks (som faller tilbake til end) der gjenstander pakkes mot endekanten av containeren.
self-start	Selvposisjonell	Tillater at et element i et oppsett kan justere seg mot beholderkanten basert på sin egen startside. Overstyrer i utgangspunktet hva den innstilte verdien er på foreldrene.
self-end	Selvposisjonell	Lar et element i et oppsett justere seg på containerens kant basert på sin egen sluttside i stedet for å arve containerens posisjonsverdi. Overstyrer i utgangspunktet hva den innstilte verdien er på foreldrene.
first baseline last baseline	Grunnlinje	Justerer alle elementene i en gruppe (dvs. celler i en rad) ved å matche opp justeringsbaselinjene. Standardverdien til firsthvis baselinebrukes alene.

Nettleserstøtte

Denne egenskapen er inkludert i spesifikasjonen CSS Box Alignment Model Level 3.

Nettleserstøtte er blitt ganske bred og i stor grad bare brukbar:

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

Referanser

• CSS Box Alignment Model Level 3 - Den offisielle spesifikasjonen der place-itemseiendommen opprinnelig ble definert.
• Mozilla Developer Network - Mozilla-teamets dokumentasjon.
• Box Alignment Cheat Sheet - Oversikten til Rachel Andrew er en super nyttig ressurs for å forstå justeringsbetingelser og deres definisjoner.