Pamatot vienumus - CSS-triki

Anonim

justify-itemsĪpašums ir sub-īpašums CSS Box Alignment modulī, kas būtībā kontrolē saskaņošanu tīkla vienību, kas ir to darbības jomu.

.element ( justify-items: center; )

justify-itemsizlīdzina režģa elementus pa rindas (inline) asi. Konkrēti, šis rekvizīts ļauj iestatīt izkārtojumu režģa konteinerā esošiem priekšmetiem (nevis pašam režģim) noteiktā pozīcijā (piemēram start, centerun end) vai ar uzvedību (piemēram, autovai stretch).

Ja tas justify-itemstiek izmantots, tas arī nosaka noklusējuma justify-selfvērtību visiem režģa vienumiem, lai gan to var ignorēt bērna līmenī, izmantojot justify-selfpaša bērna īpašumu.

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

Sintakse

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Sākotnējā vērtība: legacy
  • Attiecas uz: visiem elementiem
  • Mantots: nē
  • Aprēķinātā vērtība: kā norādīts
  • Animācijas veids: diskrēts

Vērtības

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

Atslēgvārdu pamatvērtības

  • stretch: Noklusējuma vērtība. Izlīdzina vienumus, lai aizpildītu visu režģa vienumu šūnas platumu
  • auto: tāds pats kā justify-itemsvecāka vērtība .
  • normal: Lai gan mēs redzam, ka to justify-itemsvisbiežāk izmanto režģa izkārtojumā, tas ir tehniski paredzēts jebkuram lodziņa izlīdzināšanai un normalnozīmē dažādas lietas dažādos izkārtojuma kontekstos, tostarp:
    • bloku līmeņa izkārtojumi ( start)
    • režģa izkārtojumi stretch
    • flexbox (ignorēts)
    • tabulas šūnas (ignorētas)
    • absolūti izvietoti izkārtojumi ( start)
    • absolūti novietotas kastes ( stretch)
    • nomainītas absolūti novietotas kastes ( start)
.container ( justify-items: stretch; )

Sākotnējās izlīdzināšanas vērtības

Tas pielīdzina lodziņa pirmās vai pēdējās bāzes līnijas izlīdzināšanas bāzes līniju ar atbilstošo tās līdzināšanas konteksta bāzes līniju.

.container ( justify-items: baseline; )
  • Rezerves izlīdzināšana vietnei first baselineis safe start.
  • Rezerves izlīdzināšana vietnei last baselineis safe end.
  • baselineatbilst, first baselineja to lieto atsevišķi

Zemāk esošajā demonstrācijā (vislabāk skatāms pārlūkprogrammā Firefox) mēs redzam, kā elementi sakrīt ar režģa bāzes līniju, kas balstīta pāri galvenajai asij.

Pozīcijas izlīdzināšanas vērtības

  • start: Izlīdzina vienumus līdzināšanas konteinera sākuma malai
  • end: Izlīdzina priekšmetus ar gala malas līdzināšanas konteineru
  • center: Izlīdzina vienumus izlīdzināšanas konteinera centrā
  • left: Izlīdzina vienumus izlīdzināšanas konteinera kreisajā pusē
  • right: Izlīdzina vienumus izlīdzināšanas konteinera labajā pusē
  • self-start: Izlīdzina vienumus katras režģa vienuma šūnas sākumā
  • self-end: Izlīdzina vienumus katras režģa vienuma šūnas beigās
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Pārpildes izlīdzināšanas vērtības

Pārpildes īpašums nosaka, cik tas būs redzams saturu režģa ja saturs pārsniedz režģa ierobežojošā robežas. Tātad, ja saturs ir lielāks nekā izlīdzināšanas konteiners, tas radīs pārpildi, kas var izraisīt datu zudumu. Lai to novērstu, mēs varam izmantot safevērtību, kas liek pārlūkprogrammai mainīt izlīdzināšanu, lai nezaudētu datus.

  • safe : Ja vienums pārpilda līdzināšanas konteineru, starttiek izmantots režīms.
  • unsafe : Līdzināšanas vērtība tiek saglabāta tāda, kāda tā ir, neatkarīgi no preces lieluma vai izlīdzināšanas konteinera.

Mantotās vērtības

  • legacy : Lietojot kopā ar virziena atslēgvārdu (piemēram right, leftvai center), šis atslēgvārds tiek nodots pēctečiem, lai tos mantotu. Bet, ja pēcnācējs paziņo justify-self: auto;, tad legacytiek ignorēts, bet joprojām ievēro virziena atslēgvārdu. Vērtība tiek aprēķināta pēc mantotās vērtības, ja nav norādīts virziena atslēgvārds. Pretējā gadījumā to aprēķina normal.

Demonstrācija

Vairāk informācijas

  • CSS kastes izlīdzināšanas moduļa 3. līmenis (darba projekts)
  • Pilnīgs režģa ceļvedis
  • Pilnīgs Flexbox ceļvedis

Pārlūkprogrammas atbalsts

Pārlūka atbalsts justify-itemssava veida paletē, jo to izmanto vairākos izkārtojuma kontekstos, piemēram, režģī, flexbox, tabulas šūnās. Bet kopumā, ja tiek atbalstīts režģis un flexbox, jūs varat pieņemt, ka tas justify-itemsir arī.

Režģa izkārtojums

IE Mala Firefox Chrome Safari Opera
Nē 16+ 45+ 57+ 10.1+ 44+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mobile
81+ 45+ 81+ 10.1+ 59+
Avots: caniuse

Elastīgs izkārtojums

IE Mala Firefox Chrome Safari Opera
Nē 12+ 20+ 52+ 9+ 12.1+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12.1+
Avots: caniuse

Saistītās īpašības

Almanahs 2019. gada 27. oktobrī

izlīdzināt vienumus

Džefs Greiems