Flexbox

Podcast CSS – 010: Flexbox .

Wzorzec, który może być trudny w projektowaniu responsywnym, to pasek boczny, który znajduje się obok niektórych treści. Jeśli mamy widoczny obszar, Ten wzór działa świetnie, ale tam, gdzie wszystko się kurczy, że sztywny układ może stać się problematyczny.

Elastyczny model układu pola (flexbox) to model układu zaprojektowany pod kątem treści jednowymiarowych. Doskonale sprawdza się w przypadku produktów o różnych rozmiarach, i zwrócić dla nich najlepszy układ.

Jest to idealny model układu dla tego wzorca paska bocznego. Flexbox nie tylko pomaga układać pasek boczny i treści w tekście, ale jeśli nie ma wystarczająco dużo miejsca, pasek boczny przejdzie do nowej linii. Zamiast więc ustawiać sztywne wymiary dla przeglądarki, Flexbox. możesz zamiast tego wyznaczyć elastyczne granice, które wskażą sposób wyświetlania treści.

Co można zrobić z układem elastycznym?

Układy Flex mają te funkcje: Omówimy to w tym przewodniku.

• Mogą być wyświetlane jako wiersz lub kolumna.
• Uwzględniają sposób pisania dokumentu.
• Domyślnie są to pojedyncze wiersze, ale mogą pojawiać się w kilku wierszach.
• Elementy w układzie można zmieniać wizualnie, są oddalone od ich kolejności w DOM.
• Przestrzeń może być umieszczona wewnątrz elementów, aby coraz więcej dzieci robiły w zależności od miejsca, jakiego ma rodzic.
• Przestrzeń można rozmieszczać wokół elementów i elastycznych linii w układzie zawiniętym, za pomocą właściwości wyrównania ramki.
• Same elementy można wyrównać na osi krzyżowej.

Oś główna i oś poprzeczna

Kluczem do zrozumienia modelu flexbox jest zrozumienie koncepcji osi głównej i poprzecznej. Oś główna to oś określona przez właściwość flex-direction. Jeśli wynosi on row, Twoja oś główna znajduje się w wierszu, Jeśli wartość to column, oś główna znajduje się wzdłuż kolumny.

Elementy Flex poruszają się jako grupa na osi głównej. Pamiętaj: mamy wiele różnych rzeczy i staramy się wymyślić dla nich najlepszy układ.

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

Na osi krzyżowej możesz wykonać 2 rzeczy. Elementy możesz przenosić pojedynczo lub zbiorczo, aby wyrównać je względem siebie i kontenera. Poza tym, jeśli zawinięte są linie elastyczne, możesz traktować te wiersze jako grupę, aby kontrolować sposób przypisywania do nich przestrzeni. Przekonasz się, jak to wszystko działa w praktyce, na razie pamiętaj, że oś główna jest zgodna z wartością flex-direction.

Tworzenie kontenera Flex

Zobaczmy, jak zachowuje się Flexbox, wybierając grupę produktów o różnych rozmiarach i układając ją przy użyciu flexbox. z nich.

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

Aby korzystać z Flexbox, musisz zadeklarować, że chcesz użyć kontekstu formatowania Flex, a nie zwykłego. blokowy i wbudowany. Zmień wartość właściwości display na flex.

.container {
  display: flex;
}

Jak wiesz z przewodnika po układzie, otrzymasz pole na poziomie bloku. z elementami podrzędnymi elementu elastycznego. Elementy Flexbox od razu zaczynają wykazywać pewne zachowanie Flexbox, wykorzystując swoje wartości początkowe.

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

• Elementy wyświetlają się w rzędzie.
• Nie zawijają się.
• Nie powiększają się, aby wypełnić pojemnik.
• Są one ustawione na początku kontenera.

Sterowanie kierunkiem elementów

Nie masz jeszcze dodanej usługi flex-direction, elementy są wyświetlane w wierszu, ponieważ początkowa wartość kolumny flex-direction wynosi row. Jeśli chcesz mieć wiersz, nie musisz dodawać usługi. Aby zmienić kierunek, dodaj właściwość i jedną z 4 wartości:

• row: elementy ułożone w rzędzie.
• row-reverse: ułóż elementy w rzędzie na końcu kontenera elastycznego.
• column: elementy rozmieszczone w kolumnie.
• column-reverse : elementy układają się w kolumnę na końcu kontenera elastycznego.

Wszystkie te wartości możesz wypróbować, korzystając z naszej grupy elementów w prezentacji poniżej.

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

Zachowaj ostrożność podczas korzystania z właściwości, które zmieniają kolejność wyświetlania elementów wizualnych w oderwaniu od kolejności elementów w dokumencie HTML, ponieważ może to negatywnie wpływać na dostępność. Dobrym przykładem są wartości row-reverse i column-reverse. Zmiana kolejności dotyczy tylko kolejności wizualnej, a nie logicznej. Jest to ważne, ponieważ logiczna kolejność to kolejność odczytywania tekstu przez czytnik ekranu. treści, a każdy korzystający z niej będzie kierował się w górę.

Na poniższym filmie widać, jak w odwróconym układzie wierszy przełączanie się między linkami zostaje przerwane, ponieważ nawigacja za pomocą klawiatury przebiega zgodnie z DOM, a nie wyświetlacz.

Ten problem może powodować wszystko, co może zmieniać kolejność elementów w Flexbox lub siatce. Każda zmiana kolejności powinna więc obejmować przeprowadzenie dokładnych testów mających na celu sprawdzenie, czy nie w przypadku niektórych osób jest trudna w użyciu.

Więcej informacji:

• Zmiana kolejności treści
• Odłączanie Flexbox od nawigacji za pomocą klawiatury

Tryby pisania i kierunek pisania

Elementy Flex są domyślnie układane w wiersz. Wiersz działa w kierunku, w którym przechodzą zdania w trybie pisania i kierunku skryptu. Oznacza to, że osoby pracujące w języku arabskim, w kierunku od prawej do lewej (rtl), elementy będą wyświetlane po prawej stronie. Kolejność tabulacji również zaczynała się po prawej stronie, ponieważ w takim języku czyta się zdanie po arabsku.

Jeśli używasz trybu pisania pionowego, jak w przypadku niektórych japońskich krojów pisma, wiersz będzie przesuwany w pionie, od góry do dołu. Spróbuj zmienić to urządzenie (flex-direction) w tej wersji demonstracyjnej, która używa trybu pisania w pionie.

Dlatego domyślnie zachowanie elementów elastycznych jest powiązane z trybem pisania dokumentu. Większość samouczków jest pisanych w języku angielskim lub innym w orientacji poziomej, w trybie pisania od lewej do prawej. Można przez to przyjąć, że elementy elastyczne układają się po lewej i mają poziome elementy.

Korzystając z osi głównej i krzyżowej oraz trybu pisania, fakt, że w pierwszej kolejności mówimy o początek i końcu, a nie góra, dół, lewo i prawo flexbox może być łatwiejszy do zrozumienia. Każda oś ma początek i koniec. Początek osi głównej jest określany jako główna-początek. Nasze produkty elastyczne są początkowo ustawione w głównej kolejności. Koniec tej osi to main-end. Początek osi przekrojowej to początek krzyżowy, a koniec – krzyżówka.

Pakowanie elementów Flex

Początkowa wartość właściwości flex-wrap to nowrap. Oznacza to, że jeśli w kontenerze będzie za mało miejsca, elementy wyjdą.

Elementy wyświetlane z użyciem wartości początkowych zostaną zmniejszone do maksimum. do min-content, zanim nastąpi przepełnienie.

Aby spowodować zawijanie elementów, dodaj flex-wrap: wrap do kontenera elastycznego.

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

Gdy kontener elastyczny pakuje się, tworzy wiele linii elastycznych. Jeśli chodzi o dystrybucję przestrzeni, każda linia działa jak nowy, elastyczny kontener. Dlatego jeśli zawijasz wiersze, nie można dopasować elementu z wiersza 2 do pozycji nad nim w wierszu 1. Na tym właśnie polega to, że Flexbox jest jednowymiarowy. Możesz kontrolować wyrównanie w jednej osi, wierszu lub kolumnie, ale nie oba razem, tak jak w siatce.

Skrót do informacji o elastycznym przepływie

Możesz ustawić właściwości flex-direction i flex-wrap, używając skrótu flex-flow. Aby na przykład ustawić flex-direction na column i zezwolić na pakowanie elementów:

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

Kontrolowanie miejsca w elementach elastycznych

Zakładając, że nasz kontener ma więcej miejsca niż potrzeba do wyświetlenia elementów, elementy ułożone są na początku i nie rozwijają się, aż zapełnią miejsce. Przestają się rozwijać i osiągać maksymalny rozmiar treści. Dzieje się tak, ponieważ początkowa wartość właściwości flex- wynosi:

• flex-grow: 0: elementy nie rosną.
• flex-shrink: 1: elementy mogą zmniejszyć się do rozmiaru flex-basis.
• flex-basis: auto: elementy mają podstawowy rozmiar auto.

Odpowiednia wartość to flex: initial. Skrócona właściwość flex, lub długie zapisy argumentów flex-grow, flex-shrink i flex-basis są stosowane do elementów podrzędnych argumentu kontenera Flex.

Aby elementy się rozwijały, a jednocześnie pozwalając dużym elementom mieć więcej miejsca niż w przypadku małych, wykorzystują funkcje flex:auto. Aby to zrobić, możesz skorzystać z powyższej wersji demonstracyjnej. Ustawia to te właściwości:

• flex-grow: 1: elementy mogą być większe niż flex-basis.
• flex-shrink: 1: elementy można zmniejszyć do rozmiaru flex-basis.
• flex-basis: auto: elementy mają podstawowy rozmiar auto.

Gdy użyjesz atrybutu flex: auto, produkty będą wyświetlać się w różnych rozmiarach, Przestrzeń wspólna między elementami jest dzielona po rozmieszczeniu każdego elementu jako max-content size. W ten sposób duży element uzyska więcej miejsca. Aby wymusić stosowanie tego samego rozmiaru dla wszystkich elementów i zignorować zmianę rozmiaru treści flex:auto do flex: 1 w wersji demonstracyjnej.

Rozpakowuje się do:

• flex-grow: 1: elementy mogą być większe niż flex-basis.
• flex-shrink: 1: elementy można zmniejszyć do rozmiaru flex-basis.
• flex-basis: 0: elementy mają podstawowy rozmiar 0.

Jeśli użyjesz flex: 1, wszystkie produkty mają zerowy rozmiar, więc całą przestrzeń w kontenerze elastycznym można rozłożyć. Ponieważ wszystkie elementy mają współczynnik flex-grow o wartości 1, wszystkie rozwijają się w równym stopniu, a miejsce jest dzielone w równym stopniu.

Umożliwianie wzrostu produktów w różnym tempie

Nie musisz dla wszystkich produktów stosować współczynnik flex-grow o wartości 1. Elementom elastycznym możesz przypisać różne flex-grow czynniki. W wersji demonstracyjnej poniżej pierwszy element ma flex: 1, drugi flex: 2 i trzeci flex: 3. Gdy liczba tych elementów wzrośnie z 0, dostępne miejsce w kontenerze elastycznym będzie dzielone na 6. Jedna część jest podawana pierwszemu elementowi, dwie części drugiej, trzy części do trzeciej.

Możesz zrobić to samo z elementu flex-basis elementu auto, ale musisz wskazać trzy . Pierwszą wartością jest flex-grow, drugi flex-shrink, a trzeci – flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

To rzadziej stosowany przypadek użycia jako powód, dla którego warto używać właściwości flex-basis o wartości auto jest umożliwienie przeglądarce określenia rozkładu przestrzeni. Jeśli chcesz, by element rozwinął się nieco bardziej, niż przewiduje algorytm, może się to jednak okazać przydatne.

Zmiana kolejności elementów Flex

Kolejność elementów w kontenerze elastycznym można zmieniać za pomocą właściwości order. Ta właściwość umożliwia sortowanie elementów w grupach porządkowych. Elementy są rozmieszczone w kierunku określonym przez: flex-direction. najpierw najniższe wartości. Jeśli więcej niż jeden element ma tę samą wartość, będzie wyświetlany razem z pozostałymi elementami o tej samej wartości.

Poniższy przykład pokazuje to porządkowanie.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o flexbox

Omówienie wyrównywania Flexbox

W pakiecie Flexbox wprowadzono zestaw właściwości do wyrównywania elementów i rozdzielania przestrzeni między nimi. Właściwości te były tak przydatne, że zostały przeniesione do osobnej specyfikacji zobaczysz je także w Układzie siatki. Tutaj dowiesz się, jak działają one w przypadku korzystania z Flexbox.

Zestaw właściwości można umieścić w 2 grupach. Właściwości rozkładu przestrzeni i właściwości wyrównania. Właściwości rozdzielające miejsce to:

• justify-content: rozkład przestrzeni na osi głównej.
• align-content: rozkład przestrzeni 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 poprzecznej.
• align-items: wyrównuje wszystkie elementy jako grupę na osi poprzecznej.

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

Rozmieszczanie przestrzeni na osi głównej

W przypadku wcześniejszego użycia kodu HTML elementy elastyczne układane w rzędy mają miejsce na głównej osi. Przedmioty nie są wystarczająco duże, aby całkowicie wypełnić pojemnik elastyczny. Elementy są ustawione na początku kontenera elastycznego, ponieważ wartość początkowa justify-content jest flex-start. Elementy są ułożone na początku, a dodatkowe miejsce na końcu.

dodaj do kontenera Flex właściwość justify-content, nadaj mu wartość flex-end, a elementy są ułożone na końcu kontenera, a wolne miejsce jest na początku.

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

Możesz też rozdzielić spację między elementami za pomocą atrybutu justify-content: space-between.

Wypróbuj wartości w wersji demonstracyjnej , a pełną listę znajdziesz w MDN. wszystkich możliwych wartości.

Z: flex-direction: column

Po zmianie wersji: flex-direction na column, justify-content będzie działać na tę kolumnę. Aby mieć w kontenerze trochę miejsca, gdy pracujesz w kolumnie, height lub block-size. W przeciwnym razie nie będziesz mieć miejsca do dystrybucji.

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

Rozdziela przestrzeń między liniami elastycznymi

W zapakowanym pojemniku elastycznym możesz rozłożyć elementy na osi krzyżowej. W takim przypadku możesz użyć właściwości align-content z takimi samymi wartościami jak justify-content. W odróżnieniu od metody justify-content, która domyślnie wyrównuje elementy z wartością flex-start, początkowa wartość align-content wynosi stretch. Dodaj właściwość align-content do kontenera elastycznego, aby zmienić to domyślne działanie.

.container {
  align-content: center;
}

Wypróbuj tę funkcję w wersji demonstracyjnej. W przykładzie znajdują się zawinięte wiersze elementów elastycznych, a w kontenerze jest block-size, abyśmy mieli trochę wolnego miejsca.

place-content – skrót

Aby ustawić zarówno justify-content, jak i align-content, możesz użyć place-content z jednym lub dwie wartości. Dla obu osi będzie używana jedna wartość, jeśli określisz, że pierwszy będzie używany w przypadku align-content, a drugi będzie używany w przypadku 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 poprzecznej możesz też wyrównać elementy w linii elastycznej za pomocą funkcji align-items i align-self. Ilość miejsca dostępnego na to wyrównanie będzie zależała od wysokości kontenera Flex, lub Flex linię w przypadku opakowanych produktów.

Początkowa wartość zmiennej align-self to stretch, dlatego elementy elastyczne w rzędach są domyślnie rozciągane do wysokości najwyższego elementu. Aby to zmienić, dodaj właściwość align-self do dowolnego elementu Flex.

.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 elastycznych elementów z atrybutem flex-direction: row. Ostatni element określa wysokość kontenera Flex. Pierwszy element ma właściwość align-self o wartości flex-start. Spróbuj zmienić wartość tej właściwości, aby zobaczyć, jak zmienia się ona w jej przestrzeni na osi poprzecznej.

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

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

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

Dlaczego w Flexbox nie ma funkcji uzasadnienia siebie?

Elementy Flex to grupa na osi głównej. Nie ma więc koncepcji wydzielania produktu 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 obszarze siatki. Ze względu na to, że elastyczne układy traktują elementy jako grupę, nie są one implementowane w kontekście elastycznym.

Warto wiedzieć, że Flexbox dobrze działa z automatycznymi marżami. Jeśli zauważysz, że musisz podzielić jeden produkt od grupy, lub podzielić grupę na 2 grupy, możesz zastosować w tym celu marżę. W przykładzie poniżej ostatni element ma lewy margines wynoszący auto. Automatyczny margines pochłania całą przestrzeń w kierunku, w którym jest stosowany. Powoduje to spychanie elementu w prawo, dzieląc grupy w ten sposób.

Jak wyśrodkować element w pionie i poziomie

Właściwości wyrównania mogą służyć do wyśrodkowania elementu w innym polu. Właściwość justify-content wyrównuje element na osi głównej, czyli wiersz. Właściwość align-items na osi poprzecznej.

.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

• Elastyczny układ pól MDN CSS zawiera serię szczegółowych przewodników z przykładami.
• Przewodnik po arkuszach CSS z poradami dotyczącymi Flexbox
• Co się dzieje podczas tworzenia kontenera Flexbox Flex
• Wszystko, co musisz wiedzieć o wyrównywaniu 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