Zarovnat-položky - Triky CSS

Anonim

Tato justify-itemsvlastnost je podvlastností modulu CSS Box Alignment Module, který v zásadě řídí zarovnání položek mřížky v rámci jejich rozsahu.

.element ( justify-items: center; )

justify-itemszarovná položky mřížky podél osy řádku (vložené). Tato vlastnost konkrétně umožňuje nastavit zarovnání pro položky uvnitř kontejneru mřížky (nikoli samotné mřížky) na konkrétní pozici (např start. centerA end) nebo s chováním (např. autoNebo stretch).

Když justify-itemsse použije, nastaví také výchozí justify-selfhodnotu pro všechny položky mřížky, i když ji lze přepsat na úrovni podřízené pomocí justify-selfvlastnosti na samotné podřízené.

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

Syntax

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )
  • Počáteční hodnota: legacy
  • Platí pro: všechny prvky
  • Zděděno: ne
  • Vypočítaná hodnota: jak je uvedeno
  • Typ animace: diskrétní

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 klíčových slov

  • stretch: Výchozí hodnota. Zarovná položky tak, aby vyplňovaly celou šířku buňky položky mřížky
  • auto: stejné jako hodnota justify-itemsv nadřazené.
  • normal: I když justify-itemsnejčastěji používáme rozložení mřížky, je to technicky pro jakékoli zarovnání pole a normalznamená to různé věci v různých kontextech rozložení, včetně:
    • rozvržení na úrovni bloku ( start)
    • rozložení mřížky stretch
    • flexbox (ignorováno)
    • buňky tabulky (ignorovány)
    • absolutně umístěné rozložení ( start)
    • absolutně umístěné boxy ( stretch)
    • nahradil absolutně umístěné boxy ( start)
.container ( justify-items: stretch; )

Základní hodnoty zarovnání

Toto zarovná základní linii zarovnání první nebo poslední sady základní linie s odpovídající základní linií jejího kontextu zarovnání.

.container ( justify-items: baseline; )
  • Záložní zarovnání pro first baselineje safe start.
  • Záložní zarovnání pro last baselineje safe end.
  • baselineodpovídá first baselinepoužití samostatně

V ukázce níže (nejlépe zobrazeno ve Firefoxu) vidíme, jak se prvky zarovnávají s účaří mřížky založené na hlavní ose.

Poziční hodnoty zarovnání

  • start: Zarovná položky k počáteční hraně zarovnávacího kontejneru
  • end: Zarovná položky s kontejnerem zarovnání koncové hrany
  • center: Zarovná položky ve středu zarovnávacího kontejneru
  • left: Zarovná položky v levé části zarovnávacího kontejneru
  • right: Zarovná položky vpravo od zarovnávacího kontejneru
  • self-start: Zarovná položky na začátek každé buňky položky mřížky
  • self-end: Zarovná položky na konec každé buňky položky mřížky
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )

Hodnoty zarovnání přetečení

Vlastnost overflow určuje, jak bude zobrazovat obsah mřížky, když obsah překročí mezní limity mřížky. Takže když je obsah větší než vyrovnávací kontejner, bude to mít za následek přetečení, které by mohlo vést ke ztrátě dat. Abychom tomu zabránili, můžeme použít safehodnotu, která říká prohlížeči, aby změnil zarovnání tak, aby nedocházelo ke ztrátě dat.

  • safe : Pokud položka přeteče přes zarovnávací kontejner, startpoužije se režim.
  • unsafe : Hodnota zarovnání je zachována tak, jak je, bez ohledu na velikost položky nebo kontejner zarovnání.

Starší hodnoty

  • legacy : Při použití se směrovým klíčovým slovem (např right. leftNebo center) je toto klíčové slovo předáno potomkům, aby je zdědili. Ale pokud potomek deklaruje, justify-self: auto;pak legacyje ignorován, ale stále respektuje směrové klíčové slovo. Hodnota se vypočítá na zděděnou hodnotu, pokud není poskytnuto žádné směrové klíčové slovo. Jinak to počítá do normal.

Ukázka

Více informací

  • CSS Box Alignment Module Level 3 (pracovní koncept)
  • Kompletní průvodce sítí
  • Kompletní průvodce Flexboxem

Podpora prohlížeče

Podpora prohlížeče tak justify-itemstrochu spouští gamut, protože se používá v různých kontextech rozložení, jako je mřížka, flexbox, buňky tabulky. Obecně však platí, že pokud jsou podporovány mřížky a flexbox, můžete předpokládat, že justify-itemsto také je.

Rozvržení mřížky

TJ Okraj Firefox Chrome Safari Opera
Ne 16+ 45+ 57+ 10,1+ 44+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
81+ 45+ 81+ 10,1+ 59+
Zdroj: caniuse

Flex rozložení

TJ Okraj Firefox Chrome Safari Opera
Ne 12+ 20+ 52+ 9+ 12,1+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
87+ 83+ 81+ 9+ 12,1+
Zdroj: caniuse

Související vlastnosti

Sborník dne 27. října 2019

zarovnat položky

Geoff Graham