Perustella-kohteet - CSS-temppuja

Anonim

justify-itemsOminaisuus on osa-ominaisuuden CSS Box kohdistusmoduuliin joka pohjimmiltaan ohjaa linjaus verkkoon kohteita niiden soveltamisalaan.

.element ( justify-items: center; )

justify-itemstasaa ruudukkokohdat rivin (linjassa) akselia pitkin. Tämän ominaisuuden avulla voit määrittää kohdistuksen ruudukkosäiliön sisällä oleville kohteille (ei itse ruudukolle) tietyssä asennossa (esim start. centerJa end) tai käyttäytymisellä (esim. autoTai stretch).

Kun justify-itemssitä käytetään, se asettaa myös oletusarvon justify-selfkaikille ruudukkokohteille, vaikka tämä voidaan ohittaa lapsitasolla käyttämällä justify-selfitse lapsen ominaisuutta.

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

Syntaksi

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Alkuarvo: legacy
  • Koskee kaikkia elementtejä
  • Peritty: ei
  • Laskettu arvo: määritelty
  • Animaation tyyppi: erillinen

Arvot

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

Avainsanan perusarvot

  • stretch: Oletusarvo. Kohdistaa kohteet täyttämään ruudukkoalueen solun koko leveyden
  • auto: sama kuin justify-itemsvanhemman arvo .
  • normal: Vaikka justify-itemsruudukkoasettelussa käytämme sitä useimmiten, se on teknisesti mikä tahansa laatikon suuntaus ja normaltarkoittaa erilaisia ​​asioita eri asetteluyhteyksissä, mukaan lukien:
    • lohkotason asettelut ( start)
    • ruudukon asettelu stretch
    • flexbox (ohitettu)
    • taulukon solut (ohitettu)
    • ehdottomasti sijoitetut asettelut ( start)
    • ehdottomasti sijoitetut laatikot ( stretch)
    • korvattu ehdottomasti sijoitetut laatikot ( start)
.container ( justify-items: stretch; )

Perustason kohdistusarvot

Tämä kohdistaa laatikon ensimmäisen tai viimeisen perusjoukon kohdistuksen perusviivan sen kohdistusyhteyden vastaavan perusviivan kanssa.

.container ( justify-items: baseline; )
  • Varan tasaus kohdalle first baselineon safe start.
  • Varan tasaus kohdalle last baselineon safe end.
  • baselinevastaa first baselineyksin käytettynä

Alla olevassa esittelyssä (parhaiten katsottavissa Firefoxissa) näemme, kuinka elementit kohdistuvat pääakselin poikki perustuvan ruudukon perusviivan kanssa.

Asennon kohdistuksen arvot

  • start: Kohdistaa kohteet kohdistussäiliön alareunaan
  • end: Kohdistaa kohteet loppureunan kohdistussäiliön kanssa
  • center: Kohdistaa kohteet kohdistussäiliön keskelle
  • left: Kohdistaa kohdistussäiliön vasemmalla puolella olevat kohteet
  • right: Kohdistaa kohdistussäiliön oikealla puolella olevat kohteet
  • self-start: Kohdistaa kohteet kunkin ruudukon alkusolun alkuun
  • self-end: Kohdistaa kohteet kunkin ruudukkokohteen solun loppuun
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Ylivuoto-kohdistusarvot

Ylivuoto ominaisuus määrittää, kuinka se näyttää sisällön verkkoon kun pitoisuus ylittää ruudukon raja-arvoihin. Joten kun sisältö on suurempi kuin kohdistussäiliö, se johtaa ylivuotoon, mikä voi johtaa tietojen menetykseen. Tämän estämiseksi voimme käyttää safearvoa, joka käskee selainta muuttamaan kohdistusta siten, että tietoja ei menetetä.

  • safe : Jos kohde ylittää kohdistussäiliön, startkäytetään tilaa.
  • unsafe : Kohdistusarvo pidetään sellaisenaan, tuotteen koosta tai kohdistussäiliöstä riippumatta.

Vanhat arvot

  • legacy : Kun sitä käytetään suuntasanan (esim right. leftTai center) kanssa, avainsana välitetään jälkeläisille periä. Mutta jos jälkeläinen ilmoittaa justify-self: auto;sitten legacyohitetaan, mutta silti kunnioittaa suuntaava avainsanan. Arvo laskee perityn arvon, jos suuntasanaa ei anneta. Muuten se laskee normal.

Demo

Lisää tietoa

  • CSS-laatikon kohdistusmoduuli, taso 3 (työluonnos)
  • Täydellinen opas ruudukkoon
  • Täydellinen opas Flexboxiin

Selaimen tuki

Selaintuki tukee justify-itemstavallaan asteikkoa, koska sitä käytetään useissa asetteluyhteyksissä, kuten ruudukossa, flexboxissa ja taulukon soluissa. Mutta yleensä, jos ruudukkoa ja flexboxia tuetaan, voit olettaa, että se justify-itemson myös.

Ruudukon asettelu

IE Reuna Firefox Kromi Safari Ooppera
Ei 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Lähde: caniuse

Joustava asettelu

IE Reuna Firefox Kromi Safari Ooppera
Ei 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Lähde: caniuse

Liittyvät ominaisuudet

Almanakka 27. lokakuuta 2019

kohdista kohteet

Geoff Graham