Rechtvaardigen-items - CSS-trucs

Anonim

De justify-itemseigenschap is een subeigenschap van de CSS Box Alignment Module die in feite de uitlijning van rasteritems binnen hun bereik regelt.

.element ( justify-items: center; )

justify-itemslijnt rasteritems uit langs de rijas (inline). Met deze eigenschap kunt u met name uitlijning instellen voor items in een rastercontainer (niet het raster zelf) op een specifieke positie (bijv start. centerEn end) of met een gedrag (bijv. autoOf stretch).

Wanneer justify-itemswordt gebruikt, stelt het ook de standaardwaarde in justify-selfvoor alle rasteritems, hoewel dit op het onderliggende niveau kan worden overschreven door de justify-selfeigenschap op het kind zelf te gebruiken.

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

Syntaxis

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Beginwaarde: legacy
  • Geldt voor: alle elementen
  • Overgenomen: nee
  • Berekende waarde: zoals gespecificeerd
  • Animatietype: discreet

Waarden

/* 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;

Basiszoekwoordwaarden

  • stretch​ Lijnt items uit om de hele breedte van de cel van het rasteritem te vullen
  • auto​justify-items
  • normal​justify-itemsnormal
    • lay-outs op blokniveau ( start)
    • rasterlay-outs stretch
    • flexbox (genegeerd)
    • tabelcellen (genegeerd)
    • absoluut gepositioneerde lay-outs ( start)
    • absoluut gepositioneerde dozen ( stretch)
    • absoluut gepositioneerde dozen vervangen ( start)
.container ( justify-items: stretch; )

Uitlijningswaarden basislijn

Hierdoor wordt de uitlijningsbasislijn van de eerste of laatste basislijnset van de box uitgelijnd met de corresponderende basislijn van zijn uitlijningscontext.

.container ( justify-items: baseline; )
  • De uitlijning voor first baselineis safe start.
  • De uitlijning voor last baselineis safe end.
  • baselinekomt overeen met first baselinealleen gebruikt

In de onderstaande demo (het best bekeken in Firefox) zien we hoe elementen worden uitgelijnd met de basislijn van een raster op basis van de hoofdas.

Positionele uitlijningswaarden

  • start​
  • end​
  • center​
  • left​
  • right​
  • self-start​
  • self-end​
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Overloop uitlijningswaarden

De overflow- eigenschap bepaalt hoe de inhoud van het raster wordt weergegeven wanneer de inhoud de grenslimieten van het raster overschrijdt. Dus als de inhoud groter is dan de uitlijningscontainer, zal dit resulteren in een overloop die kan leiden tot gegevensverlies. Om dit te voorkomen, kunnen we de safewaarde gebruiken die de browser vertelt om de uitlijning te wijzigen, zodat er geen gegevens verloren gaan.

  • safe ​start
  • unsafe ​

Legacy waarden

  • legacy ​ Maar als de afstammeling verklaart , wordt hij genegeerd maar respecteert hij nog steeds het richtingzoekwoord. De waarde wordt berekend naar de overgenomen waarde als er geen directionele sleutelwoord is opgegeven. Anders berekent het naar .rightleftcenterjustify-self: auto;legacynormal

Demo

Meer informatie

  • CSS Box Alignment Module Level 3 (Werkconcept)
  • Een complete gids voor rasters
  • Een complete gids voor Flexbox

Browser-ondersteuning

Browserondersteuning justify-itemsvoert het gamma uit, omdat het wordt gebruikt in meerdere lay-outcontexten, zoals raster, flexbox en tabelcellen. Maar in het algemeen, als grid en flexbox worden ondersteund, kun je ervan uitgaan dat dat justify-itemsook zo is.

Raster-indeling

D.W.Z Rand Firefox Chrome Safari Opera
Nee 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Bron: caniuse

Flexibele indeling

D.W.Z Rand Firefox Chrome Safari Opera
Nee 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Bron: caniuse

Gerelateerde eigenschappen

Almanac op 27 oktober 2019

align-items

Geoff Graham