Motivera-objekt - CSS-tricks

Anonim

Den justify-itemsegenskapen är en sub-egenskap hos CSS Box inriktningsmodulen som i princip styr inriktningen av rutnätsposter inom sin räckvidd.

.element ( justify-items: center; )

justify-itemsjusterar rutnätobjekt längs raden (inline). Specifikt tillåter den här egenskapen du ställa justering för objekt i ett rutnät container (inte rutnät själv) i en specifik position (t.ex. start, centeroch end) eller med ett beteende (t.ex. autoeller stretch).

När den justify-itemsanvänds anger den också standardvärdet justify-selfför alla rutnätobjekt, men detta kan åsidosättas på underordnad nivå genom att använda justify-selfegenskapen på själva barnet.

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

Syntax

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Ursprungligt värde: legacy
  • Gäller för: alla element
  • Ärvt: nej
  • Beräknat värde: som specificerat
  • Animationstyp: diskret

Värden

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Grundläggande sökordsvärden

  • stretch: Standardvärde. Justerar objekt för att fylla hela bredden på rutnätcellen
  • auto: samma som värdet av justify-itemsi förälder.
  • normal: Även om vi justify-itemsofta används i en rutnätlayout är det tekniskt för alla rutor och normalbetyder olika saker i olika layoutkontexter, inklusive:
    • layouter på blocknivå ( start)
    • rutnät layouter stretch
    • flexbox (ignoreras)
    • tabellceller (ignoreras)
    • absolut placerade layouter ( start)
    • absolut placerade lådor ( stretch)
    • ersatt absolut placerade lådor ( start)
.container ( justify-items: stretch; )

Baslinjejusteringsvärden

Detta justerar inriktningsbaslinjen för rutans första eller sista baslinjeuppsättning med motsvarande baslinje för dess inriktningskontext.

.container ( justify-items: baseline; )
  • Reservuppriktningen för first baselineär safe start.
  • Reservuppriktningen för last baselineär safe end.
  • baselinemotsvarar first baselinenär den används ensam

I demonstrationen nedan (bäst visad i Firefox) ser vi hur element anpassas till baslinjen för ett rutnät baserat på huvudaxeln.

Positionsinriktningsvärden

  • start: Justerar artiklar mot startkanten på justeringsbehållaren
  • end: Justerar föremål med ändkantjusteringsbehållaren
  • center: Justerar föremål mitt i justeringsbehållaren
  • left: Justerar föremål till vänster om inriktningsbehållaren
  • right: Justerar föremål till höger om inriktningsbehållaren
  • self-start: Justerar objekt i början av varje rutnätcell
  • self-end: Justerar objekt i slutet av varje rutnätcell
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Överflödesjusteringsvärden

Den spill egenskap avgör hur det kommer att visa innehållet i nätet när innehållet överstiger nätets gräns gränser. Så när innehållet är större än inriktningsbehållaren kommer det att resultera i överflöd som kan leda till dataförlust. För att förhindra detta kan vi använda det safevärde som ber webbläsaren att ändra justering så att det inte blir dataförlust.

  • safe : Om ett objekt överflödar inriktningsbehållaren används startläget.
  • unsafe : Justeringsvärdet hålls som det är, oavsett artikelstorlek eller justeringsbehållare.

Äldre värden

  • legacy : När den används med en riktnings nyckelord (t.ex. right, lefteller center), är det sökordet ledes till ättlingar att ärva. Men om ättling förklarar justify-self: auto;sedan legacyignoreras men respekterar riktnings sökord. Värdet beräknas till det ärvda värdet om inget riktat nyckelord anges. Annars beräknas det till normal.

Demo

Mer information

  • CSS Box Alignment Module nivå 3 (arbetsutkast)
  • En komplett guide till rutnät
  • En komplett guide till Flexbox

Webbläsarstöd

Webbläsarstödet justify-itemskör slags sortimentet eftersom det används i flera layoutkontexter, som rutnät, flexbox, tabellceller. Men i allmänhet, om nät och flexbox stöds, kan du anta att det justify-itemsär lika bra.

Rutnätslayout

IE Kant Firefox Krom Safari Opera
Nej 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Källa: caniuse

Flex layout

IE Kant Firefox Krom Safari Opera
Nej 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Källa: caniuse

Relaterade egenskaper

Almanack den 27 oktober 2019

justera-objekt

Geoff Graham