Elementy miejsca - CSS-Tricks

place-itemsNieruchomość w CSS jest skrótem dla align-itemsi justify-itemswłaściwości, łącząc je w jednej deklaracji.

Typowym zastosowaniem jest centrowanie w poziomie i pionie za pomocą siatki:

.center-inside-of-me ( display: grid; place-items: center; )

Właściwości te zyskały zastosowanie wraz z wprowadzeniem układów Flexbox i Grid, ale są również stosowane do:

• Pudełka na poziomie bloku
• Absolutnie ustawione pudełka
• Statyczna pozycja absolutnie pozycjonowanych pudełek
• Komórki tabeli

Składnia

Właściwość przyjmuje wartości podwójne, pierwszą for, align-itemsa drugą for justify-items. Aby odświeżyć, align-itemswyrównuje zawartość wzdłuż osi pionowej (kolumny), a justify-itemswyrównuje wzdłuż osi poziomej (wiersz).

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

To jest to samo, co pisanie:

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

Jeśli podana jest tylko jedna wartość, ustawia obie właściwości. Na przykład to:

.item ( display: grid; place-items: start; )

… To to samo co napisanie tego:

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

Zaakceptowane wartości

To, co czyni tę właściwość interesującą, to fakt, że zachowuje się różnie w zależności od kontekstu, w jakim jest używana. Na przykład niektóre wartości mają zastosowanie tylko do Flexbox i nie będą działać w ustawieniu Grid. Ponadto niektóre wartości dotyczą align-itemswłaściwości, a inne dotyczą justify-itemsboku.

Co więcej, same wartości można traktować jako należące do wielu typów wyrównania: kontekstowego, dystrybucyjnego, pozycyjnego (który staje się autopozycyjny, jeśli zostanie zastosowany bezpośrednio do elementu podrzędnego w układzie) i linii bazowej.

Rachel Andrew ma świetną ściągawkę dotyczącą wyrównywania pól, która pomaga zilustrować wpływ wartości.

Wartość	Rodzaj	Opis
auto	Kontekstowy	Wartość dostosowuje się odpowiednio w zależności od kontekstu elementu. Używa justify-itemswartości elementu nadrzędnego elementu. Jeśli element nadrzędny nie istnieje lub zostanie zastosowany do elementu, który jest umieszczony z absolute, wówczas wartość staje się normal.
normal	Kontekstowy	Przyjmuje domyślne zachowanie kontekstu układu, w którym jest stosowany. • Układy na poziomie bloku: start • Pozycjonowanie startbezwzględne : dla zastąpionych elementów bezwzględnych i stretchdla wszystkich innych • Układy tabel: Wartość jest ignorowana • Układy Flexbox: Wartość jest ignorowana • Układy siatki: o stretchile nie zastosowano współczynnika kształtu lub rozmiaru wewnętrznego, gdy zachowuje się lubićstart
stretch	Dystrybucja	Rozwija element do obu krawędzi kontenera w pionie align-itemsi w poziomie dla justify-items.
start	Pozycyjny	Wszystkie elementy są wyrównane względem siebie na początkowej (lewej) krawędzi kontenera
end	Pozycyjny	Wszystkie elementy są wyrównane względem siebie na końcowej (prawej) krawędzi kontenera
center	Pozycyjny	Elementy są wyrównane obok siebie w kierunku środka pojemnika
left	Pozycyjny	Elementy są wyrównane obok siebie w kierunku lewej strony pojemnika. Jeśli właściwość nie jest równoległa do standardowej górnej, prawej, dolnej i lewej osi, zachowuje się jak end.
right	Pozycyjny	Elementy są wyrównane obok siebie w kierunku prawej strony pojemnika. Jeśli właściwość nie jest równoległa do standardowej górnej, prawej, dolnej i lewej osi, zachowuje się jak start.
flex-start	Pozycyjny	Wartość tylko dla flexboxa (która powraca do start), gdzie elementy są pakowane w kierunku początkowej krawędzi kontenera.
flex-end	Pozycyjny	Wartość tylko dla flexboxa (która spada do end), gdzie elementy są pakowane w kierunku końcowej krawędzi pojemnika.
self-start	Samopozycyjne	Pozwala elementowi układu wyrównać się na krawędzi kontenera w oparciu o jego własną stronę początkową. Zasadniczo zastępuje ustawioną wartość w rodzicu.
self-end	Samopozycyjne	Umożliwia elementowi układu wyrównywanie się na krawędzi kontenera na podstawie własnej strony końcowej zamiast dziedziczenia wartości pozycyjnej kontenera. Zasadniczo zastępuje to, co ustawiona wartość jest w rodzicu.
first baseline last baseline	Linia bazowa	Wyrównuje wszystkie elementy w grupie (tj. Komórki w wierszu), dopasowując ich linie bazowe wyrównania. Domyślnie, firstjeśli baselinejest używane samodzielnie.

Wsparcie przeglądarki

Ta właściwość jest zawarta w specyfikacji CSS Box Alignment Model Level 3.

Obsługa przeglądarek stała się dość szeroka i w dużej mierze użyteczna:

• Edge 79+ (przejście po Chromium)
• Firefox 45+
• Chrome 59+
• Safari 11+

Bibliografia

• CSS Box Alignment Model Level 3 - Oficjalna specyfikacja, w której place-itemswłaściwość jest wstępnie zdefiniowana.
• Mozilla Developer Network - Dokumentacja zespołu Mozilli.
• Ściągawka dotycząca wyrównywania ramek - zarys Rachel Andrew jest bardzo pomocnym źródłem informacji o terminach związanych z dopasowaniem i ich definicjami.