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:
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 rozmiaruflex-basis
.flex-basis: auto
: elementy mają podstawowy rozmiarauto
.
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 rozmiaruflex-basis
.flex-basis: auto
: elementy mają podstawowy rozmiarauto
.
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 rozmiaruflex-basis
.flex-basis: 0
: elementy mają podstawowy rozmiar0
.
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
Wartość domyślna pola flex-direction
to
row
column
Domyślnie kontener elastyczny opakowuje elementy podrzędne.
flex-wrap: wrap
razem z atrybutem display: flex
, aby zawijać elementy podrzędneElement podrzędny elastycznego wygląda na zwarty. Która właściwość elastyczna pozwala temu złagodzić?
flex-grow
flex-shrink
flex-basis
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; }
Aby wyrównać pionowo z Flexbox, użyj
.container { display: flex; direction: ltr; }
Aby wyrównać poziomo do Flexbox, użyj
.container { display: flex; direction: ltr; }
Domyślnie elementy elastyczne są wyrównane do stretch
. Jeśli zależy Ci na treściach
rozmiaru używanego w przypadku produktów podrzędnych, których z poniższych stylów użyjesz?
justify-content: flex-start
align-content: start
content
wyrównuje linie elastyczne, a nie elementy podrzędne.height: auto
align-items: flex-start
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