Flexbox

Podcast CSS – 010: Flexbox

W elastycznym projektowaniu stron trudności może przysporzyć wzór, w którym pasek boczny jest umieszczony w ramach 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.

Flexbox to model układu graficznego przeznaczony do 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, z 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 je w tym przewodniku.

• Mogą być wyświetlane jako wiersz lub kolumna.
• Uwzględniają sposób pisania dokumentu.
• Domyślnie są one wyświetlane w jednym wierszu, ale można je rozciągnąć na kilka wierszy.
• 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 rozmieścić wokół elementów i linii elastycznych w układzie spakowanym, używając właściwości wyrównania pola.
• Elementy można wyrównać na osi poprzecznej.

Oś główna i oś poprzeczna

Kluczem do zrozumienia flexboxa jest zrozumienie pojęcia osi głównej i osi 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 głównej osi. Pamiętaj, że mamy wiele elementów i próbujemy znaleźć 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 poprzecznej możesz wykonać 2 działania. 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. W tym przewodniku zobaczysz, jak to działa w praktyce. Na razie pamiętaj, że oś główna podąża za flex-direction.

Tworzenie kontenera Flex

Zobaczmy, jak działa flexbox, biorąc pod uwagę grupę elementów o różnych rozmiarach i wykorzystując flexbox do ich rozmieszczenia.

<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. Aby to zrobić, 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 elastyczne natychmiast zaczynają zachowywać się jak flexbox, używając swoich wartości początkowych.

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

• Elementy wyświetlają się w rzędzie.
• Nie owija.
• Nie rozszerzają się, aby wypełnić kontener.
• Są one ustawione na początku kontenera.

kontrolowanie kierunku elementów;

Mimo że nie masz jeszcze dodanej właściwości flex-direction, elementy są wyświetlane w wierszu, ponieważ początkowa wartość właściwości flex-direction to row. Jeśli chcesz utworzyć wiersz, nie musisz dodawać tej właściwości. Aby zmienić kierunek, dodaj właściwość i jedną z 4 wartości:

• row: elementy są rozmieszczone w wierszu.
• 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.

Odwracanie przepływu elementów i ułatwienia 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ść. 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ż kolejność logiczna to kolejność, w jakiej czytnik ekranu odczyta treści, a każdy użytkownik poruszający się po interfejsie za pomocą klawiatury będzie postępował zgodnie z tą kolejnością.

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. Dlatego każda zmiana kolejności powinna być dokładnie przetestowana, aby sprawdzić, czy nie utrudni ona korzystania z witryny niektórym osobom.

Więcej informacji:

• Zmiana kolejności treści
• Połączenie Flexboxa z nawigacją za pomocą klawiatury

Tryby i kierunki pisania

Elementy Flex są domyślnie układane w wiersz. Wiersz jest wyświetlany w kierunku, w jakim zdania są pisane w danym trybie i języku. Oznacza to, że jeśli pracujesz w języku arabskim, który ma kierunek od prawej do lewej, elementy będą wyrównane 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 sposób działania elementów elastycznych domyślnie jest powiązany 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.

Ze względu na główną i poprzeczną oś oraz tryb pisania warto wiedzieć, że w flexboxie mówimy o początku i końcu, a nie o górze, dole, lewej i prawej stronie. 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 krzyżowej to cross-start, a koniec cross-end.

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 przy użyciu wartości początkowych będą się zmniejszać do rozmiaru min-content, zanim nastąpi przepełnienie.

Aby elementy się zawijały, dodaj element flex-wrap: wrap do elastycznego kontenera.

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

Gdy kontener elastyczny pakuje się, tworzy wiele linii elastycznych. Jeśli chodzi o rozmieszczenie elementów, każdy wiersz 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. To właśnie oznacza jednowymiarowość układu flexbox. Możesz kontrolować wyrównanie na jednej osi, w wierszu lub kolumnie, a nie na obu jednocześnie, jak to jest możliwe 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 przestrzeni w elementach flex

Zakładając, że nasz kontener ma więcej miejsca niż jest potrzebne do wyświetlenia elementów, elementy ustawiają się na początku i nie powiększają się, aby wypełnić całą przestrzeń. Przestają się rozwijać i osiągać maksymalny rozmiar treści. Wynika to z tego, że początkowa wartość właściwości flex- to:

• flex-grow: 0: elementy nie rosną.
• flex-shrink: 1: produkty mogą się kurczyć do rozmiaru mniejszego niż flex-basis.
• flex-basis: auto: elementy mają rozmiar bazowy 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. Możesz to sprawdzić, korzystając z powyższego demonstracyjnego pliku. Właściwości te mają następujące wartoś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ą rozmiar podstawowy auto.

Użycie flex: auto spowoduje, że elementy będą miały różne rozmiary, ponieważ przestrzeń wspólna dla elementów jest dzielona po rozmieszczeniu każdego elementu zgodnie z maksymalnym rozmiarem treści. 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.

Rozpakowanie tego pliku powoduje:

• flex-grow: 1: elementy mogą być większe niż flex-basis.
• flex-shrink: 1: elementy mogą być mniejsze niż ich 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 nadawać wszystkim elementom współczynnika flex-grow równego 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 te elementy powiększają się z 0, dostępne miejsce w kontenerze flex jest dzielone na 6 części. Pierwsza część jest przyznawana pierwszemu produktowi, druga – drugiemu, a trzecia – trzeciemu.

Możesz zrobić to samo z elementu flex-basis elementu auto, ale musisz wskazać trzy . Pierwsza wartość to flex-grow, druga to flex-shrink, a trzecia to 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ę trochę bardziej, niż przewiduje algorytm, może się to jednak okazać przydatne.

Zmienianie kolejności elementów elastycznych

Elementy 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ą układane w kierunku określonym przez flex-direction, najpierw wartości najniższe. 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.

Przykład poniżej pokazuje tę kolejność.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o flexbox

Omówienie wyrównania w modelu Flexbox

Flexbox wprowadził zestaw właściwości do wyrównywania elementów i rozmieszczania ich w przestrzeni. Właściwości te były tak przydatne, że zostały przeniesione do osobnej specyfikacji zobaczysz je również w Układzie siatki. Tutaj dowiesz się, jak działają one w przypadku flexboxa.

Zestaw usług można podzielić na 2 grupy. 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 ustawienia obu powyższych właściwości.

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

• align-self: wyrównuje pojedynczy element na osi poprzecznej.
• align-items: wszystkie elementy są wyrównane jako grupa na osi poziomej.

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

Rozmieszczanie elementów na osi głównej

W przypadku wcześniej użytego kodu HTML elementy flex są rozmieszczone w wierszu, więc na głównej osi jest miejsce. Elementy są za małe, aby całkowicie wypełnić elastyczny kontener. Elementy są wyrównane na początku kontenera flex, ponieważ początkowa wartość parametru justify-content to flex-start. Elementy są wyrównane na początku, a dodatkowe spacje znajdują się na końcu.

Dodaj do kontenera flex właściwości justify-content, nadaj jej wartość flex-end, a elementy ustawią się na końcu kontenera, a wolne miejsce zostanie umieszczone na początku.

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

Możesz też rozłożyć elementy na równej przestrzeni za pomocą justify-content: space-between.

Wypróbuj niektóre wartości w wersji demonstracyjnej, a pełny zestaw możliwych wartości znajdziesz na stronie MDN.

Z: flex-direction: column

Jeśli zmienisz wartość flex-direction na column, w kolumnie będzie działać wartość justify-content. Aby mieć wolne miejsce w kontenerze podczas pracy w kolumnie, musisz przypisać kontenerowi wartość height lub block-size. W przeciwnym razie nie będziesz mieć wolnego miejsca na dystrybucję.

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

Dystrybucja miejsca między liniami elastycznymi

W przypadku spakowanego kontenera flex możesz mieć miejsce na dystrybucję na osi poprzecznej. 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 parametru justify-content, który domyślnie dopasowuje elementy do wartości flex-start, początkowa wartość parametru align-content to 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.

Skrót place-content

Aby ustawić zarówno atrybuty justify-content, jak i align-content, możesz użyć atrybutu place-content z 1 lub 2 wartościami. Jeśli podasz obie wartości, dla osi align-content zostanie użyta pierwsza, a dla osi justify-content – druga.

.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ównywać elementy w linii elastycznej za pomocą wartości align-itemsi align-self. Miejsce dostępne na to wyrównanie zależy od wysokości kontenera flex lub wiersza flex w przypadku spakowanego zestawu elementó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 elastycznego.

.container {
  display: flex;
}

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

Do wyrównania elementu użyj jednej z tych wartości:

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

Pełną listę wartości znajdziesz na stronie MDN.

Następne demo zawiera pojedynczą linię elementów elastycznych z 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 swojej 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 tym kolejnym pokazie spróbuj zmienić wartość align-items, aby wyrównać wszystkie elementy na osi poprzecznej jako grupę.

Dlaczego w flexbox nie ma justify-self?

Elementy flex działają jako grupa na głównej osi. 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 w wierszu, aby dopasowywać elementy do tej osi w ich obszarze siatki. Ze względu na sposób, w jaki układy elastyczne traktują elementy jako grupę, te właściwości nie są implementowane w kontekście elastycznych układów.

Warto wiedzieć, że Flexbox dobrze działa z automatycznymi marżami. Jeśli chcesz wyodrębnić jeden element z grupy lub podzielić grupę na 2 grupy, możesz użyć marginesu. W przykładzie poniżej ostatni element ma margines lewy auto. Automatyczny margines pochłania całą przestrzeń w kierunku, w którym jest stosowany. Oznacza to, że element przesuwa się w prawo, przez co grupy się rozdzielają.

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 do głównej osi, która jest rzędem. 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

• MDN CSS Flexible Box Layout 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ównaniu w Flexbox
• Jak duże jest to elastyczne pudełko?
• Przypadki użycia Flexboxa
• Sprawdzanie i debugowanie układów CSS Flexbox w Narzędziach deweloperskich w Chrome