Zarovnať-položky - Triky CSS

Anonim

Táto justify-itemsvlastnosť je podvlastnosťou modulu CSS Box Alignment Module, ktorý v zásade riadi zarovnanie položiek mriežky v rámci ich rozsahu.

.element ( justify-items: center; )

justify-itemszarovná položky mriežky pozdĺž osi riadku (inline). Táto vlastnosť konkrétne umožňuje nastaviť zarovnanie pre položky vo vnútri kontajnera mriežky (nie samotnej mriežky) na konkrétnej pozícii (napr start. centerA end) alebo so správaním (napr. autoAlebo stretch).

Keď justify-itemssa použije, nastaví sa tiež predvolená justify-selfhodnota pre všetky položky mriežky, aj keď túto hodnotu je možné prepísať na úrovni dieťaťa pomocou justify-selfvlastnosti samotného dieťaťa.

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

Syntax

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Pôvodná hodnota: legacy
  • Vzťahuje sa na: všetky prvky
  • Zdedené: č
  • Vypočítaná hodnota: podľa zadania
  • Typ animácie: diskrétna

Hodnoty

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

Základné hodnoty kľúčových slov

  • stretch: Predvolená hodnota. Zarovná položky tak, aby vyplnili celú šírku bunky položky mriežky
  • auto: rovnaké ako hodnota justify-itemsv rodičovi.
  • normal: Aj keď sa používame justify-itemsnajčastejšie v rozložení mriežky, je to technicky pre akékoľvek zarovnanie polí a normalznamená to rôzne veci v rôznych kontextoch rozloženia, vrátane:
    • rozloženia na úrovni bloku ( start)
    • rozloženia mriežky stretch
    • flexbox (ignorovaný)
    • bunky tabuľky (ignorované)
    • absolútne umiestnené rozloženia ( start)
    • absolútne umiestnené boxy ( stretch)
    • nahradené absolútne umiestnené boxy ( start)
.container ( justify-items: stretch; )

Základné hodnoty zarovnania

Týmto sa zarovná základná čiara zarovnania prvej alebo poslednej množiny základnej čiary s príslušnou základnou čiarou jej kontextu zarovnania.

.container ( justify-items: baseline; )
  • Záložné zarovnanie pre first baselineje safe start.
  • Záložné zarovnanie pre last baselineje safe end.
  • baselinezodpovedá first baselinepoužitiu samostatne

V ukážke nižšie (najlepšie zobrazené vo Firefoxe) vidíme, ako sa prvky zarovnávajú so základnou čiarou mriežky založenej na hlavnej osi.

Pozičné hodnoty zarovnania

  • start: Zarovná položky k začiatočnému okraju zarovnávacieho kontajnera
  • end: Zarovná položky s kontajnerom na zarovnanie koncového okraja
  • center: Zarovná položky do stredu zarovnávacieho kontajnera
  • left: Zarovná položky vľavo od vyrovnávacieho kontajnera
  • right: Zarovná položky napravo od zarovnávacieho kontajnera
  • self-start: Zarovná položky na začiatok každej bunky položky mriežky
  • self-end: Zarovná položky na koniec každej bunky položky mriežky
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Hodnoty zarovnania pretečenia

Vlastnosť pretečenia určuje, ako bude zobrazovať obsah mriežky, keď obsah prekročí hraničné limity mriežky. Takže keď je obsah väčší ako vyrovnávací kontajner, bude to mať za následok pretečenie, ktoré by mohlo viesť k strate údajov. Aby sme tomu zabránili, môžeme použiť safehodnotu, ktorá informuje prehliadač, aby zmenil zarovnanie tak, aby nedochádzalo k strate údajov.

  • safe : Ak položka preteká zarovnávacím kontajnerom, startpoužije sa režim.
  • unsafe : Hodnota zarovnania sa zachová tak, ako je, bez ohľadu na veľkosť položky alebo zarovnávací kontajner.

Staré hodnoty

  • legacy : Ak sa použije s smerovým kľúčovým slovom (napr right. leftAlebo center), toto kľúčové slovo sa odovzdá potomkom, aby ho mohli dediť. Ale ak potomok deklaruje, justify-self: auto;potom legacyje ignorovaný, ale stále rešpektuje smerové kľúčové slovo. Hodnota sa počíta zo zdedenej hodnoty, ak nie je zadané smerové kľúčové slovo. V opačnom prípade sa počíta do normal.

Ukážka

Viac informácií

  • Modul zarovnania CSS boxu úroveň 3 (pracovný návrh)
  • Kompletný sprievodca po sieti
  • Kompletný sprievodca programom Flexbox

Podpora prehliadača

Podpora prehľadávača justify-itemsspúšťa gamut, pretože sa používa vo viacerých kontextoch rozloženia, ako je mriežka, flexbox, bunky tabuľky. Ale všeobecne platí, že ak sú podporované mriežky a flexbox, môžete predpokladať, že justify-itemsto tiež je.

Rozloženie mriežky

IE Hrana Firefox Chrome Safari Opera
Nie 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Zdroj: caniuse

Flex rozloženie

IE Hrana Firefox Chrome Safari Opera
Nie 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Zdroj: caniuse

Súvisiace vlastnosti

Almanach 27. októbra 2019

zarovnať položky

Geoff Graham