Pateisinti elementus - CSS-gudrybės

Anonim

justify-itemsNuosavybė yra sub-nuosavybė CSS dėžutė suvedimas modulis, kuris iš esmės kontroliuoja tinklo elementų derinimą per jų taikymo sritį.

.element ( justify-items: center; )

justify-itemssulygiuoja tinklelio elementus išilgai eilutės (įterptosios) ašies. Konkrečiai, ši ypatybė leidžia nustatyti elementų, esančių tinklelio talpykloje, (o ne paties tinklelio) nustatymą tam tikroje padėtyje (pvz. start, centerIr end) arba elgseną (pvz., autoArba stretch).

Kai justify-itemsjis naudojamas, jis taip pat nustato numatytąją justify-selfvisų tinklelio elementų vertę, tačiau tai galima nepaisyti vaiko lygiu naudojant justify-selfpaties vaiko nuosavybę.

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

Sintaksė

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Pradinė vertė: legacy
  • Taikoma: visiems elementams
  • Paveldima: ne
  • Apskaičiuota vertė: kaip nurodyta
  • Animacijos tipas: diskretiškas

Vertybės

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

Pagrindinės raktinių žodžių vertės

  • stretch: Numatytoji reikšmė. Sulygiuoja elementus, kad užpildytų visą tinklelio elemento langelio plotį
  • auto: tas pats kaip justify-itemstėvų vertė .
  • normal: Nors mes matome justify-items, kad jie dažniausiai naudojami tinklelio išdėstyme, tai techniškai tinka bet kokiam langelio lygiavimui ir normalreiškia skirtingus dalykus skirtingame išdėstymo kontekste, įskaitant:
    • bloko lygio išdėstymai ( start)
    • tinklelio maketai stretch
    • „flexbox“ (nepaisoma)
    • lentelės langeliai (nepaisyti)
    • absoliučiai išdėstyti maketai ( start)
    • absoliučiai išdėstytos dėžės ( stretch)
    • pakeistos absoliučiai išdėstytos dėžės ( start)
.container ( justify-items: stretch; )

Bazinės linijos vertės

Tai sulygina laukelio pirmojo arba paskutinio nustatyto lygiavimo pagrindą su atitinkama jo lygiavimo konteksto bazine linija.

.container ( justify-items: baseline; )
  • Atsarginis lygiavimas first baselineyra safe start.
  • Atsarginis lygiavimas last baselineyra safe end.
  • baselineatitinka first baselinenaudojant atskirai

Žemiau pateiktoje demonstracijoje (geriausiai žiūrima „Firefox“) matome, kaip elementai susilygina su pagrindine tinklelio linija, pagrįsta pagrindine ašimi.

Padėties derinimo vertės

  • start: Elementai sulygiuojami su išlygiavimo konteinerio pradiniu kraštu
  • end: Elementai sulygiuojami su galinio krašto lygiavimo talpykla
  • center: Išlygina elementus išlygiavimo konteinerio centre
  • left: Sulygiuoja elementus, esančius kairėje lygiavimo talpykloje
  • right: Sulygiuoja elementus, esančius lygiavimo talpyklos dešinėje
  • self-start: Sulygina elementus kiekvieno tinklelio elemento langelio pradžioje
  • self-end: Sulygiuoja elementus kiekvieno tinklelio elemento langelio gale
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Perpildymo lygiavimo vertės

Perpildymo turtas priklauso, kaip jis bus rodomas tinklo turinį, kai kiekis viršija tinklo kraštinės ribas. Taigi, kai turinys yra didesnis nei lygiavimo talpykla, tai gali sukelti perpildymą, kuris gali sukelti duomenų praradimą. Norėdami to išvengti, galime naudoti safevertę, kuri nurodo naršyklei pakeisti lygiavimą, kad neprarastų duomenų.

  • safe : Jei elementas perpildo lygiavimo talpyklą, startnaudojamas režimas.
  • unsafe : Lygiavimo vertė laikoma tokia, kokia yra, neatsižvelgiant į prekės dydį ar išlyginimo talpyklą.

Senos vertybės

  • legacy : Kai naudojamas su krypties raktiniu žodžiu (pvz. right, leftArba center), šis raktinis žodis perduodamas palikuonims paveldėti. Bet jei palikuonis pareiškia, justify-self: auto;tada legacyjis ignoruojamas, bet vis tiek gerbia krypties raktinį žodį. Vertė apskaičiuojama pagal paveldėtą vertę, jei nenurodomas krypties raktinis žodis. Priešingu atveju jis apskaičiuoja normal.

Demonstracija

Daugiau informacijos

  • 3 lygio CSS dėžutės derinimo modulis (darbo projektas)
  • Išsamus tinklelio vadovas
  • Išsamus „Flexbox“ vadovas

Naršyklės palaikymas

Naršyklės palaikymas justify-itemspaleidžia gamą, nes jis naudojamas keliuose išdėstymo kontekstuose, pvz., Tinklelyje, „flexbox“, lentelės langeliuose. Bet apskritai, jei tinklelis ir „flexbox“ palaikomi, galite manyti, kad justify-itemstai taip pat yra.

Tinklelio išdėstymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 16+ 45+ 57+ 10,1+ 44+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
81+ 45+ 81+ 10,1+ 59+
Šaltinis: caniuse

Lankstus išdėstymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 12+ 20+ 52+ 9+ 12.1+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
87+ 83+ 81+ 9+ 12.1+
Šaltinis: caniuse

Susijusios savybės

Almanachas 2019 m. Spalio 27 d

derinti elementus

Geoffas Grahamas