Przejdź do treści głównej
Wersja: 0.78

Układ z Flexboxem

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Komponent może określać układ swoich elementów potomnych za pomocą algorytmu Flexbox. Flexbox został zaprojektowany, aby zapewnić spójny układ na różnych rozmiarach ekranów.

Zwykle użyjesz kombinacji właściwości flexDirection, alignItems i justifyContent do osiągnięcia pożądanego układu.

ostrzeżenie

Flexbox działa w React Native tak samo jak w CSS na stronie internetowej, z kilkoma wyjątkami. Domyślne wartości są inne: flexDirection domyślnie ustawione jest na column zamiast row, alignContent na flex-start zamiast stretch, flexShrink na 0 zamiast 1, a parametr flex obsługuje tylko pojedynczą liczbę.

Flex​

Właściwość flex definiuje, jak elementy będą "wypełniać" dostępną przestrzeń wzdłuż głównej osi. Przestrzeń jest dzielona proporcjonalnie do wartości właściwości flex każdego elementu.

W poniższym przykładzie czerwony, pomarańczowy i zielony widok są elementami potomnymi kontenera z ustawionym flex: 1. Czerwony widok używa flex: 1, pomarańczowy flex: 2, a zielony flex: 3. 1+2+3 = 6, co oznacza, że czerwony widok otrzyma 1/6 przestrzeni, pomarańczowy 2/6, a zielony 3/6.

Flex Direction​

flexDirection kontroluje kierunek rozmieszczenia elementów potomnych węzła. Określa to tzw. główną oś. Oś poprzeczna jest prostopadła do głównej osi lub jest osią, wzdłuż której układane są zawijane linie.

  • column (wartość domyślna) Wyrównuje elementy potomne od góry do dołu. Jeśli zawijanie jest włączone, następna linia zacznie się po prawej stronie pierwszego elementu na górze kontenera.

  • row Wyrównuje elementy potomne od lewej do prawej. Jeśli zawijanie jest włączone, następna linia zacznie się pod pierwszym elementem po lewej stronie kontenera.

  • column-reverse Wyrównuje elementy potomne od dołu do góry. Jeśli zawijanie jest włączone, następna linia zacznie się po prawej stronie pierwszego elementu na dole kontenera.

  • row-reverse Wyrównuje elementy potomne od prawej do lewej. Jeśli zawijanie jest włączone, następna linia zacznie się pod pierwszym elementem po prawej stronie kontenera.

Więcej informacji znajdziesz tutaj.

Layout Direction​

Właściwość direction określa kierunek układania elementów potomnych i tekstu w hierarchii. Kierunek układu wpływa również na to, do których krawędzi odnoszą się wartości start i end. Domyślnie React Native używa kierunku LTR. W tym trybie start oznacza lewą krawędź, a end prawą.

  • LTR (wartość domyślna) Tekst i elementy potomne układane są od lewej do prawej. Marginesy i wypełnienia stosowane do początku elementu są dodawane po lewej stronie.

  • RTL Tekst i elementy potomne układane są od prawej do lewej. Marginesy i wypełnienia stosowane do początku elementu są dodawane po prawej stronie.

Justify Content​

justifyContent opisuje, jak wyrównać elementy potomne wzdłuż głównej osi ich kontenera. Na przykład możesz użyć tej właściwości, aby wyśrodkować element potomny poziomo w kontenerze z flexDirection ustawionym na row lub pionowo w kontenerze z flexDirection ustawionym na column.

  • flex-start(wartość domyślna) Wyrównuje elementy potomne do początku głównej osi kontenera.

  • flex-end Wyrównuje elementy potomne do końca głównej osi kontenera.

  • center Wyrównaj elementy potomne w kontenerze do środka wzdłuż głównej osi kontenera.

  • space-between Rozmieść elementy potomne równomiernie wzdłuż głównej osi kontenera, dzieląc dostępną przestrzeń pomiędzy elementy.

  • space-around Rozmieść elementy potomne równomiernie wzdłuż głównej osi kontenera, dzieląc dostępną przestrzeń wokół elementów. W porównaniu do space-between, użycie space-around spowoduje, że przestrzeń zostanie dodana przed pierwszym elementem i po ostatnim.

  • space-evenly Równomiernie rozłóż elementy w kontenerze wzdłuż głównej osi. Odstępy pomiędzy każdą parą sąsiednich elementów, pomiędzy początkiem kontenera a pierwszym elementem oraz pomiędzy końcem kontenera a ostatnim elementem, są jednakowe.

Więcej informacji znajdziesz tutaj.

Wyrównanie elementów (Align Items)​

alignItems określa, w jaki sposób wyrównać elementy potomne wzdłuż osi poprzecznej ich kontenera. Działa bardzo podobnie do justifyContent, ale zamiast stosować się do osi głównej, alignItems stosuje się do osi poprzecznej.

  • stretch (wartość domyślna) Rozciągnij elementy potomne w kontenerze, aby dopasować je do height osi poprzecznej kontenera.

  • flex-start Wyrównaj elementy potomne w kontenerze do początku osi poprzecznej kontenera.

  • flex-end Wyrównaj elementy potomne w kontenerze do końca osi poprzecznej kontenera.

  • center Wyrównaj elementy potomne w kontenerze do środka osi poprzecznej kontenera.

  • baseline Wyrównaj elementy potomne w kontenerze wzdłuż wspólnej linii bazowej. Poszczególne elementy potomne mogą być ustawione jako referencyjna linia bazowa dla swoich rodziców.

informacja

Aby stretch miał efekt, elementy potomne nie mogą mieć ustalonego wymiaru wzdłuż osi poprzecznej. W poniższym przykładzie ustawienie alignItems: stretch nie daje efektu, dopóki width: 50 nie zostanie usunięte z elementów potomnych.

Więcej informacji znajdziesz tutaj.

Wyrównanie pojedynczego elementu (Align Self)​

alignSelf ma te same opcje i efekt co alignItems, ale zamiast wpływać na wszystkie elementy potomne w kontenerze, można zastosować tę właściwość do pojedynczego elementu, aby zmienić jego wyrównanie w obrębie rodzica. alignSelf nadpisuje opcje ustawione przez rodzica za pomocą alignItems.

Wyrównanie zawartości (Align Content)​

alignContent definiuje rozkład linii wzdłuż osi poprzecznej. Ma to efekt tylko wtedy, gdy elementy są zawijane do wielu linii przy użyciu flexWrap.

  • flex-start (wartość domyślna) Wyrównaj zawinięte linie do początku osi poprzecznej kontenera.

  • flex-end Wyrównaj zawinięte linie do końca osi poprzecznej kontenera.

  • stretch (wartość domyślna przy użyciu Yoga w przeglądarce) Rozciągnij zawinięte linie, aby dopasować je do wysokości osi poprzecznej kontenera.

  • center Wyrównaj zawinięte linie do środka osi poprzecznej kontenera.

  • space-between Rozmieść zawinięte linie równomiernie wzdłuż osi poprzecznej kontenera, dzieląc dostępną przestrzeń pomiędzy linie.

  • space-around Rozmieść zawinięte linie równomiernie wzdłuż osi poprzecznej kontenera, dzieląc dostępną przestrzeń wokół linii. Każdy koniec kontenera ma o połowę mniejszą przestrzeń w porównaniu do przestrzeni pomiędzy liniami.

  • space-evenly Równomiernie rozłóż zawinięte linie wzdłuż osi poprzecznej kontenera, dzieląc dostępną przestrzeń wokół linii. Każda przestrzeń ma taki sam rozmiar.

Więcej informacji znajdziesz tutaj.

Zawijanie elementów (Flex Wrap)​

Właściwość flexWrap jest ustawiana na kontenerach i kontroluje zachowanie elementów potomnych, gdy przekraczają rozmiar kontenera wzdłuż osi głównej. Domyślnie elementy potomne są wymuszane do jednej linii (co może powodować zmniejszanie elementów). Jeśli zawijanie jest dozwolone, elementy są zawijane w wiele linii wzdłuż osi głównej w razie potrzeby.

Podczas zawijania linii, alignContent może być użyte do określenia rozmieszczenia linii w kontenerze. Dowiedz się więcej tutaj.

Flex Basis, Grow i Shrink​

  • flexBasis to niezależny od osi sposób określania domyślnego rozmiaru elementu wzdłuż osi głównej. Ustawienie flexBasis elementu potomnego jest analogiczne do ustawienia width tego elementu, gdy jego rodzic jest kontenerem z flexDirection: row, lub height gdy rodzic ma flexDirection: column. flexBasis elementu to jego domyślny rozmiar przed jakimikolwiek obliczeniami flexGrow i flexShrink.

  • flexGrow określa, jak przestrzeń w kontenerze powinna być rozdzielona między elementy potomne wzdłuż osi głównej. Po rozmieszczeniu elementów potomnych kontener rozdzieli pozostałe miejsce proporcjonalnie do wartości flex grow poszczególnych elementów.

    flexGrow akceptuje dowolną wartość zmiennoprzecinkową >= 0, z wartością domyślną 0. Kontener rozdzieli pozostałe miejsce między elementy potomne ważone według ich wartości flexGrow.

  • flexShrink określa, jak elementy potomne powinny być zmniejszane wzdłuż osi głównej, gdy ich łączny rozmiar przekracza rozmiar kontenera. flexShrink działa podobnie do flexGrow, traktując nadmiarowy rozmiar jako ujemną pozostałą przestrzeń. Obie właściwości współdziałają, pozwalając elementom dynamicznie dostosowywać rozmiar.

    flexShrink akceptuje dowolną wartość zmiennoprzecinkową >= 0, z wartością domyślną 0 (w środowisku webowym domyślnie 1). Kontener zmniejszy elementy potomne proporcjonalnie do ich wartości flexShrink.

Dowiedz się więcej tutaj.

Row Gap, Column Gap i Gap​

  • rowGap ustawia rozmiar odstępu między wierszami elementu.

  • columnGap ustawia rozmiar odstępu między kolumnami elementu.

  • gap ustawia rozmiar odstępu między wierszami i kolumnami. Jest to skrót dla rowGap i columnGap.

Możesz użyć flexWrap i alignContent razem z gap, aby zapewnić spójne odstępy między elementami.

Szerokość i Wysokość​

Właściwość width określa szerokość obszaru treści elementu. Analogicznie, właściwość height określa wysokość obszaru treści elementu.

Zarówno width, jak i height przyjmują następujące wartości:

  • auto (wartość domyślna) React Native oblicza szerokość/wysokość na podstawie zawartości (inne elementy potomne, tekst lub obraz).

  • pixels Definiuje szerokość/wysokość w bezwzględnych pikselach. W zależności od innych stylów, może to nie być ostateczny wymiar węzła.

  • percentage Definiuje szerokość/wysokość jako procent odpowiednio szerokości/wysokości rodzica.

Pozycja​

Typ position elementu definiuje jego pozycjonowanie względem samego siebie, rodzica lub bloku zawierającego.

  • relative (wartość domyślna) Domyślnie element jest pozycjonowany relatywnie. Oznacza to, że jest układany zgodnie z normalnym przepływem układu, a następnie przesunięty względem tej pozycji na podstawie wartości top, right, bottom i left. Przesunięcie nie wpływa na pozycję elementów siostrzanych ani nadrzędnych.

  • absolute W pozycjonowaniu absolutnym element nie uczestniczy w normalnym przepływie układu. Jest układany niezależnie od elementów siostrzanych. Jego pozycja jest określana na podstawie wartości top, right, bottom i left. Wartości te pozycjonują element względem jego bloku zawierającego.

  • static W pozycjonowaniu statycznym element jest układany zgodnie z normalnym przepływem i ignoruje wartości top, right, bottom oraz left. Ta wartość position powoduje także, że element nie tworzy bloku zawierającego dla elementów absolutnych, chyba że obecne są inne nadrzędne właściwości stylu (np. transform). Pozwala to pozycjonować elementy absolute względem czegoś innego niż ich rodzic. Uwaga: static jest dostępne tylko w Nowej Architekturze.

Blok zawierający​

Blok zawierający elementu to element nadrzędny, który kontroluje jego pozycję i rozmiar. Działanie bloków zawierających w React Native jest bardzo podobne do ich działania w środowisku webowym, z pewnymi uproszczeniami wynikającymi z braku niektórych funkcji webowych.

Wartości top, right, bottom i left absolutnie pozycjonowanego elementu będą obliczane względem jego bloku zawierającego.

Wartości procentowe (np. width: '50%' lub padding: '10%') zastosowane do absolutnie pozycjonowanych elementów są obliczane względem rozmiaru ich bloku zawierającego. Przykładowo, jeśli blok zawierający ma szerokość 100 punktów, to width: 50% spowoduje, że element będzie miał 50 punktów szerokości.

Poniższa lista pomoże określić blok zawierający dla dowolnego elementu:

  • Jeśli element ma typ position relative lub static, to jego blokiem zawierającym jest rodzic.

  • Jeśli element ma właściwość position ustawioną na absolute, to jego blokiem zawierającym jest najbliższy przodek, dla którego spełniony jest jeden z warunków:

    • Ma właściwość position o wartości innej niż static
    • Ma właściwość transform

Dalsze zagłębienie​

Zapoznaj się z interaktywnym yoga playground, który pomoże lepiej zrozumieć Flexbox.

Omówiliśmy podstawy, ale istnieje wiele innych stylów potrzebnych do układania elementów. Pełna lista właściwości kontrolujących układ znajduje się tutaj.

Dodatkowo możesz zobaczyć przykłady od inżynierów Wix.