Flexbox (układ z elastycznymi blokami CSS) to sposób elastycznego wyświetlania elementów w kontenerze (nazywany kontenerem Flex). Elementy w kontenerze (zwane elementami flex) mogą się powiększać lub zmniejszać, aby zoptymalizować przestrzeń kontenera przy zachowaniu określonej kolejności i odstępów. Flexbox może okazać się szczególnie przydatny, gdy chcesz dopasować elementy o różnych rozmiarach do wierszy lub kolumn, gdzie większe elementy zajmują więcej miejsca niż mniejsze.
Ustawienia flexbox
Ustawienia flexbox znajdziesz w panelu Elastyczny na karcie Flexbox.
Użyj Flexbox
Aby używać flexbox, zaznacz pole Użyj Flexbox. Bieżący element nadrzędny staje się kontenerem flex, a właściwości flexbox stają się dostępne w panelu Elastyczny.
Układ Flexbox jest niedostępny, jeśli:
- Bieżący element nadrzędny to element tekstowy, taki jak
<p>lub<h1>. - Bieżący element nadrzędny zawiera elementy wbudowane, takie jak
<span>lub<a>. Nie dotyczy to elementów nadrzędnych, które są stronami.
Wszystkie bezpośrednie elementy podrzędne kontenera flex stają się elementami flex. (Warstwy pomocnicze są wykluczone). Elementy flex są rozmieszczone wzdłuż głównej osi, którą można ustawić jako poziomą lub pionową. Możesz też skonfigurować kierunek, w którym zawartość będzie przesuwać się wzdłuż osi. Zmiana orientacji i kierunku flexbox jest możliwa, więc właściwości są ustawione na takie wartości jak „flex-start” i „flex-end”, a nie góra, dół, lewo lub prawo.
Kierunek
Od wybrania osi głównej i kierunku ruchu względem niej zależy, jak są rozmieszczone elementy flex.
| Kierunek | Zachowanie | Główna oś |
|---|---|---|
| wiersz | Elementy flex są rozmieszczone w wierszach ułożonych w kierunku przepływu tekstu (z początkiem po lewej stronie w przypadku języków stosujących zapis od lewej do prawej, takich jak polski). |
Poziomo |
| odwrócony wiersz | Elementy flex są rozmieszczone w wierszach ułożonych w kierunku odwrotnym do przepływu tekstu (z początkiem po prawej stronie w przypadku języków stosujących zapis od lewej do prawej, takich jak polski). |
Poziomo |
| kolumna | Elementy flex są rozmieszczone w kolumnach zgodnie z kierunkiem przepływu treści (zwykle początek jest u góry). |
Pionowo |
| odwrócona kolumna | Elementy flex są rozmieszczone w kolumnach odwrotnie do kierunku przepływu treści (zwykle początek jest na dole). |
Pionowo |
Odstępy
Odstępy określają, czy elementy flex są rozmieszczone automatycznie czy w odstępach stałych.
| Odstępy | Zachowanie |
|---|---|
| Standardowe | Elementy flex są automatycznie rozmieszczane w kontenerze flex zgodnie z określonymi ustawieniami justowania, zawijania wierszy i wyrównania. |
| Stałe | Elementy flex są automatycznie rozmieszczane w kontenerze flex zgodnie z określonymi ustawieniami odstępów elementów podrzędnych i granic. |
Justowanie
Justowanie określa, jak elementy flex są rozmieszczone na głównej osi. To ustawienie jest dostępne, gdy używasz odstępów standardowych.
| Justowanie | Zachowanie |
|---|---|
| flex-początek | Elementy flex są zgromadzone przy początkowej krawędzi wiersza lub kolumny. |
| flex-koniec | Elementy flex są zgromadzone przy końcowej krawędzi wiersza lub kolumny. |
| do środka | Elementy flex są wyśrodkowane wzdłuż głównej osi. |
| odstęp-między | Elementy flex są rozmieszczone równomiernie wzdłuż głównej osi, przy czym pierwszy i ostatni element stykają się z krawędziami kontenera. |
| odstęp-wokół | Elementy flex są rozmieszczone w równych odstępach wzdłuż głównej osi, a odstępy od obu końców wiersza są o połowę mniejsze. |
| odstęp-równomiernie | Elementy flex są równomiernie rozmieszczone wzdłuż głównej osi, z takimi samymi odstępami po obu stronach elementu początkowego i końcowego. |
Wyrównanie względem osi poprzecznej
Wyrównanie względem osi poprzecznej to sposób, w jaki elementy elastyczne są rozmieszczone wzdłuż tej osi.
| Wyrównanie względem osi poprzecznej | Zachowanie |
|---|---|
| flex-początek | Elementy flex są umieszczone przy krawędzi początkowej dla osi poprzecznej. |
| flex-koniec | Elementy flex są umieszczone przy krawędzi końcowej dla osi poprzecznej. |
| do środka | Elementy flex umieszczone w połowie długości osi poprzecznej. |
| rozciągnięcie | Elementy flex są rozciągnięte, aby wypełnić dostępne miejsce wzdłuż osi poprzecznej. |
| linia bazowa | Elementy flex są rozmieszczone wzdłuż osi poprzecznej, w taki sposób, że ich linie bazowe są wyrównane |
Zawijanie
Zawijanie określa, czy zawartość zawija się w kontenerze. To ustawienie jest dostępne, gdy używasz odstępów standardowych.
| Zawijanie | Zachowanie |
|---|---|
| bez zawijania | Elementy flex są rozmieszczone w 1 wierszu lub 1 kolumnie. |
| zawijanie | Elementy flex można zawijać, aby utworzyć kilka wierszy lub kolumn, gdy są zbyt duże, aby zmieścić je w jednym wierszu. |
| zawijanie-odwrócone | Elementy flex można zawijać, aby utworzyć kilka wierszy lub kolumn, gdy są zbyt duże, aby zmieścić je w jednym wierszu. Kierunek osi poprzecznej jest odwrócony. |
Dopasowanie zawijania
Dopasowanie zawijania określa, jak są ułożone są wiersze lub kolumny wzdłuż osi poprzecznej (która jest prostopadła do osi głównej(, jeśli w kontenerze flex jest kilka wierszy lub kolumn. To ustawienie jest dostępne, gdy włączone są standardowe odstępy i zawijanie tekstu.
| Dopasowanie zawijania | Zachowanie |
|---|---|
| flex-początek | Wiersze lub kolumny są zgromadzone przy początkowej krawędzi kontenera. |
| flex-koniec | Wiersze lub kolumny są zgromadzone przy końcowej krawędzi kontenera. |
| do środka | Wiersze lub kolumny są wyśrodkowane wzdłuż osi poprzecznej. |
| rozciągnięcie | Wiersze lub kolumny są rozciągnięte, aby wypełnić dostępną przestrzeń wzdłuż osi poprzecznej, chyba że mają zdefiniowaną wysokość. |
| odstęp-między | Wiersze lub kolumny są rozmieszczone równomiernie wzdłuż osi poprzecznej, przy czym początkowe i końcowe wiersze lub kolumny przylegają do krawędzi kontenera. |
| odstęp-wokół | Wiersze lub kolumny są rozmieszczone równomiernie wzdłuż osi poprzecznej, tak że przy krawędziach kontenera pozostają odstępy o połowę mniejsze niż między wierszami lub kolumnami. |
Odstępy między elementami podrzędnymi
Odległość między 2 elementami w kontenerze flex (w pikselach). To ustawienie jest dostępne w przypadku stałych odstępów.
Odstępy od granic
Odległość między elementami zewnętrznymi a kontenerem flex w pikselach. To ustawienie jest dostępne w przypadku stałych odstępów.
Kolejność elementów podrzędnych
Tutaj znajdują się elementy znajdujące się w flexbox. Aby zmienić ich kolejność, przeciągnij elementy w nowe miejsce na liście.
Inny sposób: możesz też przenosić elementy elastyczne na scenie.
Właściwości elementów podrzędnych flexbox
Elementy flex mają własne właściwości. Wybierz element podrzędny, aby wyświetlić i edytować jego ustawienia flexbox.
Elementy flex mogą się powiększać lub pomniejszać, ale przestrzegają ustawień minimalnej i maksymalnej szerokości i wysokości. Ich właściwości Lewo i Góra są wyłączone, ponieważ elementy elastyczne są rozmieszczone zgodnie z ustawieniami elementu flex, ale można zmienić ich pozycje za pomocą właściwości przesunięcia.
Wyrównanie względem osi poprzecznej
Wyrównanie elementu względem osi poprzecznej powoduje, że zostaje zastąpione ustawienie domyślne tego wyrównania dla danego kontenera.
| Wyrównanie względem osi poprzecznej | Zachowanie |
|---|---|
| auto | W elemencie flex używane jest ustawienie wyrównania względem osi poprzecznej skonfigurowane dla kontenera flex. |
| linia bazowa | Linia bazowa elementu flex jest wyrównana z liniami bazowymi innych elementów flex używających wyrównania linii bazowej. |
| do środka | Element flex znajduje się na środku osi poprzecznej. |
| flex-koniec | Element flex jest umieszczony wzdłuż osi poprzecznej przy końcowej krawędzi kontenera. |
| flex-początek | Element flex jest umieszczony wzdłuż osi poprzecznej przy początkowej krawędzi kontenera. |
| rozciągnięcie | Element flex rozciąga się tak, aby wypełnił kontener wzdłuż osi poprzecznej, chyba że ma zdefiniowaną wysokość. |
Flex – zwiększanie
Współczynnik powiększenia flex określa, jak bardzo element flex powiększy się, aby wypełnić dostępne miejsce w kontenerze flex wzdłuż osi głównej, proporcjonalnie do współczynników powiększenia flex w innych elementach w tym samym wierszu lub tej samej kolumnie. To ustawienie jest dostępne, gdy używasz odstępów standardowych.
Jeśli na przykład wiersz zawiera 3 elementy flex o współczynnikach powiększenia 1, 1 i 2, ostatni element flex zajmie 2 razy więcej dostępnego miejsca w wierszu niż pozostałe elementy flex.
Jeśli suma wszystkich współczynników powiększenia dla elementów w wierszu lub kolumnie jest mniejsza niż 1, elementy flex mogą nie wykorzystać całej dostępnej przestrzeni.
Jeśli współczynnik powiększenia flex wynosi 0, element flex nie będzie powiększany.
Flex – zmniejszanie
Współczynnik pomniejszenia flex określa, jak bardzo element flex pomniejszy się, aby zmieścił się w kontenerze flex wzdłuż osi głównej, proporcjonalnie do współczynników pomniejszenia w innych elementach w tym samym wierszu lub tej samej kolumnie. To ustawienie jest dostępne, gdy używasz odstępów standardowych.
Jeśli na przykład wiersz zawiera 3 elementy flex o współczynnikach pomniejszenia 1, 1 i 2, ostatni element flex zmniejszy się bardziej w porównaniu z innymi elementami flex. Współczynniki pomniejszenia elementu flex uwzględniają rozmiar elementu flex.
Jeśli współczynnik pomniejszenia elementu flex wynosi 0, element flex nie zostanie zmniejszony.