Flexbox

Podcast o CSS – 010: Flexbox

Wzorzec projektowy, który może sprawiać problemy podczas projektowania responsywnego, to pasek boczny osadzony w pewnej treści. Gdy jest dość miejsca, ten wzorzec sprawdza się świetnie, ale tam, gdzie obszar jest ściśnięty, sztywny układ staje się problematyczny.

Model układu elastycznego pola (flexbox) to model układu przeznaczony do jednowymiarowej treści. Doskonale sprawdza się w przypadku kilku elementów o różnych rozmiarach i zwracania dla nich najlepszego układu.

To idealny model układu dla tego wzoru paska bocznego. Flexbox nie tylko pomaga w umieszczeniu paska bocznego i zawartości w tekście. Gdy zabraknie miejsca, pasek boczny pojawi się w nowej linii. Zamiast ustawiać sztywne wymiary przeglądarki za pomocą funkcji Flexbox, możesz określić elastyczne granice, aby wskazać, jak treści mogą być wyświetlane.

Co można zrobić przy użyciu układu elastycznego?

Układy Flex mają następujące funkcje, które omówimy w tym przewodniku.

• Mogą być wyświetlane w postaci wierszy lub kolumn.
• Uwzględniają tryb pisania w dokumencie.
• Domyślnie są one w jednym wierszu, ale można je zawinąć na wiele wierszy.
• Elementy w układzie można zmieniać wizualnie w różny sposób w DOM.
• Obszar można rozmieścić wewnątrz elementów, dzięki czemu powiększają się lub zmniejszają w zależności od dostępnego miejsca w elemencie nadrzędnym.
• Za pomocą właściwości Wyrównanie ramki można rozmieścić wokół elementów i elastyczne linie w układzie zwiniętym.
• Elementy te można wyrównać na osi krzyżowej.

Oś główna i oś krzyżowa.

Kluczem do zrozumienia funkcji Flexbox jest zrozumienie koncepcji osi głównej i osi poprzecznej. Oś główna to oś ustawiona przez usługę flex-direction. Jeśli jest to row, oś główna znajduje się wzdłuż wiersza, a column – wzdłuż kolumny.

Elementy Flex przesuwają się jako grupa na osi głównej. Pamiętaj: mamy sporo rzeczy i staramy się dobrać jak najlepszy układ do potrzeb grupy.

Oś krzyżowa biegnie w przeciwnym kierunku względem osi głównej, więc jeśli flex-direction ma wartość row, oś krzyżowa biegnie wzdłuż kolumny.

Na osi poprzecznej możesz wykonywać 2 czynności. Elementy możesz przenosić pojedynczo lub zbiorczo, aby wyrównać je względem siebie i kontenera elastycznego. Poza tym jeśli masz zawinięte linie elastyczne, możesz je traktować jako grupę, aby kontrolować sposób przypisywania do nich miejsca. Jak to działa w praktyce, dowiesz się z tego przewodnika. Pamiętaj na razie, że oś główna jest za flex-direction.

Tworzenie kontenera elastycznego

Zobaczmy, jak funkcja Flexbox działa na podstawie grupowania elementów o różnej wielkości.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Aby używać flexbox, musisz zadeklarować, że chcesz używać kontekstu formatowania elastycznego, a nie zwykłego układu blokowego i wbudowanego. Aby to zrobić, zmień wartość właściwości display na flex.

.container {
  display: flex;
}

Jak już wiesz z przewodnika po układzie, otrzymasz pudełko na poziomie bloku z elementami podrzędnymi. Elementy Flexbox od razu zaczynają wykazywać pewne działanie z użyciem swoich wartości początkowych.

Wartości początkowe oznaczają, że:

• Elementy są wyświetlane w wierszach.
• Nie zawijają.
• Nie rosną, aby wypełnić kontener.
• Są one ustawiane na początku kontenera.

Sterowanie kierunekem elementów

Chociaż nie masz jeszcze dodanej właściwości flex-direction, elementy wyświetlają się w postaci wiersza, ponieważ początkowa wartość flex-direction wynosi row. Jeśli chcesz utworzyć wiersz, nie musisz dodawać tej usługi. Aby zmienić kierunek, dodaj właściwość i jedną z 4 wartości:

• row: elementy są rozmieszczone w wierszach.
• row-reverse: – elementy zostaną rozmieszczone w wierszu od końca kontenera elastycznego.
• column: elementy są wyświetlane w kolumnie.
• column-reverse : elementy są układane w kolumnie na końcu kontenera elastycznego.

Możesz wypróbować wszystkie wartości za pomocą naszej grupy produktów w poniższej wersji demonstracyjnej.

Odwracanie przepływu elementów i ułatwień dostępu

Zachowaj ostrożność, używając właściwości, które zmieniają kolejność wyświetlania elementów wizualnych w inny sposób niż uporządkowana w dokumencie HTML, ponieważ może to negatywnie wpłynąć na dostępność. Dobrym przykładem są wartości row-reverse i column-reverse. Dzieje się tak tylko w przypadku kolejności wizualnej, a nie kolejności logicznej. To ważne, bo logiczna kolejność oznacza, że czytnik ekranu odczyta treść, a każda osoba korzystająca z klawiatury przyjdzie sama.

Na poniższym filmie widać, jak w odwróconym układzie wierszy wyświetlanie między linkami jest przerywane, ponieważ nawigacja za pomocą klawiatury przebiega zgodnie z DOM, a nie z wyświetlaczem wizualnym.

Przyczyną tego problemu może być każdy element, który może zmieniać kolejność elementów w flexbox lub siatce. Dlatego przy każdej zmianie kolejności należy przeprowadzać szczegółowe testy, aby upewnić się, że nie utrudnia to niektórym użytkownikom korzystania z witryny.

Więcej informacji:

• Zmiana kolejności treści
• Flexbox i nawigacja przy użyciu klawiatury rozłączają się

Tryby i kierunek pisania

Elementy Flex są domyślnie ułożone w wierszu. Wiersz jest układany w kierunku, w którym zdania przepływają w trybie pisania i kierunku skryptu. Oznacza to, że jeśli pracujesz w języku arabskim, w którym zapis kierunkowy jest pisany od prawej do lewej (RTL), elementy będą wyrównane po prawej stronie. Kolejność tabulacji także zaczyna się po prawej stronie, ponieważ tak właśnie są zdania po arabsku.

Jeśli pracujesz z pionowym trybem pisania, jak w przypadku niektórych japońskich krojów czcionki, wiersz będzie wyświetlać się pionowo od góry do dołu. Spróbuj zmienić tekst w polu flex-direction w tej wersji demonstracyjnej, w którym używany jest tryb pisania w pionie.

Dlatego domyślne zachowanie elementów Flex jest powiązane z trybem pisania w dokumencie. Większość samouczków pisze się w języku angielskim lub innym poziomym, od lewej do prawej. Ułatwi to założenie, że elementy elastyczne pojawiają się po lewej stronie i wyświetlają się w poziomie.

Mając na uwadze główną i krzyżową oś oraz tryb pisania, łatwiej zrozumieć to, że w flexboxie piszemy start i koniec, a nie górną, dolną, lewą i prawą stronę w flexbox. Każda oś ma początek i koniec. Początek osi głównej to główny początek. Dlatego elementy elastyczne są początkowo ustawiane na początku odtwarzania. Koniec tej osi to main-end. Początek osi przekrojowej to krzyżyk, a końcowy krzyżyk.

Pakowanie elementów w formacie Flex

Wartość początkowa właściwości flex-wrap wynosi nowrap. Oznacza to, że jeśli w kontenerze jest za mało miejsca, elementy mogą się przemieścić.

Elementy wyświetlane z wartościami początkowymi zostaną zmniejszone do maksymalnego rozmiaru min-content przed ich przepełnieniem.

Aby umożliwić pakowanie elementów, dodaj do kontenera elastycznego tag flex-wrap: wrap.

.container {
  display: flex;
  flex-wrap: wrap;
}

Gdy kontener elastyczny się owija, tworzy wiele linii elastycznych. Jeśli chodzi o rozłożenie przestrzeni, każda linia działa jak nowy kontener elastyczny. Dlatego w przypadku pakowania wierszy nie można znaleźć w wierszu 2 czegoś, co znajduje się w wierszu 1, z czymś wyżej. Na tym właśnie polega jednowymiarowe rozwiązanie Flexbox. Wyrównanie możesz kontrolować w jednej osi, wierszu lub kolumnie, ale nie w obu tych miejscach, jak w przypadku siatki.

Krótkofalówka

Właściwości flex-direction i flex-wrap możesz ustawić, korzystając ze skrótu flex-flow. Aby na przykład ustawić flex-direction na column i zezwolić na pakowanie:

.container {
  display: flex;
  flex-flow: column wrap;
}

Kontrolowanie miejsca w elementach Flex

Zakładając, że w kontenerze jest więcej miejsca, niż jest to potrzebne do wyświetlenia elementów, elementy wyświetlają się w linii na początku i nie wypełniają miejsca. Przestają się rozwijać przy maksymalnym rozmiarze treści. Dzieje się tak, ponieważ wartość początkowa właściwości flex- to:

• flex-grow: 0: elementy nie rosną.
• flex-shrink: 1: elementy mogą być mniejsze niż flex-basis.
• flex-basis: auto: elementy mają podstawowy rozmiar auto.

Może to być wartość słowa kluczowego flex: initial. Do elementów podrzędnych kontenera elastycznego stosuje się właściwości skrócone flex lub długie ręce flex-grow, flex-shrink i flex-basis.

Aby elementy się rozwijały, a duże elementy mogą mieć więcej miejsca niż małe, użyj właściwości flex:auto. Możesz spróbować, korzystając z powyższej wersji demonstracyjnej. Spowoduje to ustawienie właściwości na:

• flex-grow: 1: rozmiar elementu może przekraczać flex-basis.
• flex-shrink: 1: elementy mogą zmniejszyć się mniejszy niż flex-basis.
• flex-basis: auto: elementy mają podstawowy rozmiar auto.

Używanie atrybutu flex: auto oznacza, że produkty będą miały różne rozmiary, ponieważ przestrzeń między nimi jest udostępniana po rozłożeniu każdego elementu z maksymalnym rozmiarem treści. Dzięki temu duży element zyska więcej miejsca. Aby wymusić na wszystkich elementach ten sam rozmiar i ignorować rozmiar treści, w wersji demonstracyjnej zmień flex:auto na flex: 1.

To rozpakuje się do:

• flex-grow: 1: rozmiar elementu może przekraczać flex-basis.
• flex-shrink: 1: elementy mogą zmniejszyć się mniejszy niż flex-basis.
• flex-basis: 0: elementy mają podstawowy rozmiar 0.

Jeśli używasz elementu flex: 1, który oznacza, że wszystkie elementy mają zerowy rozmiar, cała przestrzeń w kontenerze elastycznym może być rozprowadzana. Wszystkie elementy mają współczynnik flex-grow o wartości 1, dlatego powiększają się tak samo, a przestrzeń jest równomierna.

Umożliwiają wzrost liczby produktów w różnym tempie

Nie musisz przypisywać wszystkim produktom współczynnika flex-grow równego 1. Możesz przypisać produktom elastycznym różne flex-grow czynniki. W wersji demonstracyjnej poniżej pierwszy element ma flex: 1, drugi flex: 2 i trzeci flex: 3. W miarę jak rozrastają się0 ilość dostępnego miejsca w kontenerze elastycznym dzieli się na 6 części. Jedna część jest przekazywana pierwszemu elementowi, dwie części do drugiego, trzy części do trzeciego.

To samo możesz zrobić w polu flex-basis o wartości auto, ale musisz określić 3 wartości. Pierwszą wartością jest flex-grow, druga flex-shrink, a trzecia flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Jest to rzadziej stosowany przypadek użycia, ponieważ właściwość flex-basis o wartości auto pozwala przeglądarce sprawdzić rozkład miejsca. Jeśli chcesz, aby element rósł trochę bardziej, niż określi algorytm, może to być przydatne.

Zmienianie kolejności elementów Flex

Kolejność elementów w kontenerze elastycznym można zmienić za pomocą właściwości order. Ta właściwość umożliwia porządkowanie elementów w grupach porządkowych. Elementy są rozmieszczone w kierunku określonym przez flex-direction. Najpierw są ułożone najmniejsze wartości. Jeśli więcej niż jeden element ma taką samą wartość, będzie wyświetlany razem z innymi elementami o tej wartości.

Poniższy przykład ilustruje tę kolejność.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o flexbox

Omówienie wyrównywania Flexbox

W usłudze Flexbox wprowadzono zestaw właściwości umożliwiających wyrównywanie elementów i rozdzielanie przestrzeni między nimi. Właściwości te były tak przydatne, że zostały przeniesione do ich własnych specyfikacji i można je znaleźć także w sekcji Układ siatki. Tutaj możesz sprawdzić, jak działają one na urządzeniach Flexbox.

Zbiór właściwości można umieścić w 2 grupach. Właściwości rozkładu przestrzeni i właściwości wyrównywania. Właściwości rozkładające przestrzeń:

• justify-content: rozkład przestrzeni na osi głównej.
• align-content: rozkład miejsca na osi poprzecznej.
• place-content: skrót do ustawiania obu powyższych właściwości.

Właściwości używane do wyrównywania w flexbox:

• align-self: wyrównuje pojedynczy element na osi krzyżowej.
• align-items: wyrównuje wszystkie elementy jako grupę na osi krzyżowej.

Jeśli pracujesz na osi głównej, właściwości zaczynają się od justify-. Na osi krzyżowej zaczynają się od align-.

Rozmieszczenie przestrzeni na osi głównej

Jeśli używasz kodu HTML, elementy elastyczne są układane w wiersz, przez co na głównej osi jest miejsce. Elementy nie są wystarczająco duże, aby całkowicie wypełnić kontener elastyczny. Elementy pojawiają się na początku kontenera elastycznego, ponieważ wartość początkowa justify-content to flex-start. Elementy są ustawiane na początku, a dodatkowa spacja znajduje się na końcu.

Dodaj do kontenera elastycznego właściwość justify-content i nadaj jej wartość flex-end. Elementy zostaną umieszczone na końcu kontenera, a wolna przestrzeń zostanie umieszczona na początku.

.container {
  display: flex;
  justify-content: flex-end;
}

Możesz też rozdzielić odstęp między elementy za pomocą właściwości justify-content: space-between.

Wypróbuj niektóre wartości w demonstracji i wejdź na stronę MDN, by poznać pełny zestaw możliwych wartości.

Przez: flex-direction: column

Jeśli zmienisz flex-direction na column, kolumna justify-content będzie działać w tej kolumnie. Aby w kontenerze działać jako kolumna, musisz przypisać do niego właściwość height lub block-size. W przeciwnym razie nie będziesz mieć wolnego miejsca na rozpowszechnianie treści.

Wypróbuj różne wartości, tym razem z układem kolumn Flexbox.

Rozkładanie przestrzeni między liniami elastycznymi

W opakowanym, elastycznym kontenerze możesz mieć miejsce na rozłożenie na osi krzyżowej. W takim przypadku możesz użyć właściwości align-content z tymi samymi wartościami co justify-content. W odróżnieniu od justify-content, który domyślnie wyrównuje elementy do flex-start, wartość początkowa align-content wynosi stretch. Aby zmienić to działanie domyślne, dodaj do kontenera elastycznego właściwość align-content.

.container {
  align-content: center;
}

Wypróbuj tę funkcję w wersji demonstracyjnej. W przykładzie znajdują się zawijane wiersze elementów elastycznych, a kontener zawiera element block-size, aby zapewnić nam trochę wolnego miejsca.

place-content – skrót

Aby ustawić zarówno justify-content, jak i align-content, możesz użyć właściwości place-content z 1 lub 2 wartościami. Jedna wartość będzie używana dla obu osi, jeśli określisz, że pierwsza wartość będzie używana w przypadku align-content i druga dla justify-content.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Wyrównywanie elementów na osi krzyżowej

Na osi krzyżowej możesz też wyrównywać elementy w linii elastycznej, używając elementów align-items i align-self. Miejsce dostępne na to wyrównanie będzie zależało od wysokości kontenera elastycznego lub linii elastycznej w przypadku zapakowanego zestawu elementów.

Początkowa wartość align-self wynosi stretch, dlatego elementy w wierszu można domyślnie rozciągać do wysokości najwyższego elementu. Aby to zmienić, dodaj właściwość align-self do dowolnego elementu elastycznego.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Aby wyrównać element, użyj dowolnej z tych wartości:

• flex-start
• flex-end
• center
• stretch
• baseline

Zobacz pełną listę wartości w MDN.

Następna wersja demonstracyjna zawiera 1 wiersz elementów elastycznych z atrybutem flex-direction: row. Ostatni element określa wysokość kontenera elastycznego. Pierwszy element ma właściwość align-self o wartości flex-start. Spróbuj zmienić wartość tej właściwości, aby sprawdzić, jak porusza się ona w swoim otoczeniu na osi przekrojowej.

Właściwość align-self jest stosowana do poszczególnych elementów. Właściwość align-items można zastosować do kontenera elastycznego, by ustawić wszystkie właściwości align-self jako grupę.

.container {
  display: flex;
  align-items: flex-start;
}

W tej następnej prezentacji spróbuj zmienić wartość align-items, aby wyrównać wszystkie elementy na osi krzyżowej jako grupę.

Dlaczego w flexboxie nie ma opcji uzasadnienia?

Elementy Flex działają jak grupa na osi głównej. Nie ma więc koncepcji podziału pojedynczego elementu z tej grupy.

W układzie siatki właściwości justify-self i justify-items działają na osi wbudowanej, aby wyrównać elementy na tej osi w obrębie obszaru siatki. Ze względu na to, że układy elastyczne traktują elementy jako grupę, właściwości te nie są implementowane w kontekście elastycznym.

Warto wiedzieć, że Flexbox działa bardzo dobrze z automatycznymi marginesami. Jeśli zajdzie potrzeba wydzielenia jednego produktu z grupy lub podzielenia jej na 2 grupy, możesz w tym celu zastosować marżę. W poniższym przykładzie ostatni element ma lewy margines auto. Automatyczny margines zajmuje całą przestrzeń w kierunku, w którym zostanie zastosowany. Oznacza to, że przesuwa element w prawo, dzieląc w ten sposób grupy.

Jak wyśrodkować element w pionie i poziomie

Właściwości wyrównania pozwalają wyśrodkować element w innym polu. Właściwość justify-content umieszcza element na osi głównej, czyli wierszu. Właściwość align-items na osi krzyżowej.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o flexbox

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

Zasoby

• Opis elastycznego układu pola CSS w MDN zawiera serię szczegółowych przewodników z przykładami.
• Porady dotyczące CSS: Flexbox
• Co się dzieje, gdy tworzysz kontener Flexbox Flex
• Wszystko, co musisz wiedzieć o wyrównaniu w Flexbox
• Jak duże jest to elastyczne pudełko?
• Przypadki użycia Flexbox
• Sprawdzanie i debugowanie układów CSS Flexbox w Narzędziach deweloperskich w Chrome