CSS Flexbox #1. Tworzenie pierwszego układu Flexbox

Pod koniec 2018 roku opublikowaliśmy książkę o CSS Grid, narzędziu do tworzenia layoutów, które rewolucjonizuje projektowanie frontendowych stron internetowych. CSS Grid jest całkowicie natywny dla CSS i umożliwia tworzenie systemu układu opartego na siatce, przy użyciu kolumn i wierszy.

„CSS Grid Explained” natychmiast stał się jedną z naszych najlepiej sprzedających się książek. Dlatego pracujemy nad dużą aktualizacją i rozszerzeniem tej książki. Rozpoczynamy również produkcję nowej książki „Flexbox Explained”. Flexbox jest ściśle powiązany z CSS Grid, ale istnieją zauważalne różnice:

• Flexbox to jednowymiarowy model układu. Może zarządzać kolumnami lub wierszami.
• CSS Grid to dwuwymiarowy model układu. Może zarządzać zarówno kolumnami, jak i wierszami.

W ciągu najbliższych kilku tygodni opublikujemy serię samouczków Flexbox, gdy będziemy pisać „Flexbox Explained”. Ten pierwszy samouczek przedstawia podstawowe koncepcje CSS Flexbox z praktycznymi przykładami.

Wprowadzenie do Flexbox

Specyfikacja CSS Flexbox opisuje układ elementów ( flex-items ) wewnątrz kontenera ( flex-container ). Te elementy mogą rosnąć lub zmniejszać się na szerokość i/lub wysokość, w zależności od dostępnej przestrzeni pojemnika. Pozycje „wyginają się”, aby jak najlepiej dopasować się do kontenera nadrzędnego.

Te „wygięte” elementy można układać w dowolnym kierunku (oś w linii lub oś bloku), zapewniając w ten sposób dużą elastyczność przy zmianie rozmiaru (szerokości lub wysokości) ekranu lub jego orientacji.

Możesz zapoznać się ze specyfikacją Flexbox W3C, klikając ten link.

Krok 1. Utwórz kod HTML

Zacznijmy ten przykład od utworzenia pliku HTML z przykładowym kodem. Przygotowałem dla Ciebie trochę HTML - jest to kontener z 3 elementami potomnymi.

• Otwórz preferowany edytor kodu.
• Utwórz pusty plik HTML.
• Odwiedź tę stronę i skopiuj kod HTML
• Wklej ten kod do pliku HTML.

Krok 2. Utwórz CSS

Teraz, gdy mamy kontener z 3 elementami, dodajmy trochę stylizacji.

• Utwórz plik CSS o nazwie style.css. . Umieść ten plik w tym samym folderze, co plik HTML. Link do tego pliku CSS znajduje się już w tagu Twojego pliku HTML
• Skopiuj i wklej ten kod, który jest również dostępny w Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Ten obraz pokazuje, jak będzie wyglądał Twój kod po otwarciu pliku HTML w przeglądarce. Trzy elementy podrzędne są tak szerokie, jak ich kontener nadrzędny. Wysokość zależy od zawartości każdej pozycji. Zwróć uwagę na dopełnienie 2rem (około 32px na ekranie komputera stacjonarnego) ze wszystkich stron.

Krok 3. Style CSS Flexbox

Teraz nadszedł czas, aby rozpocząć część tego samouczka dotyczącą Flexbox.

• Edytuj plik CSS i dodaj ten kod:

 .container { display: flex; }

Ten obraz pokazuje, jak będzie teraz wyglądał Twój kod:

Co się zmieniło? Od strony technicznej kontener nadrzędny jest teraz flex-container . Elementy podrzędne zamieniły się w elementy flex-items .

Dlaczego zmienił się rozmiar pojemników? Elementy elastyczne nie są tak szerokie jak ich kontener nadrzędny. Są teraz tak szerokie, jak zawartość w nich zawarta. Elementy flex-items są wyświetlane jako elementy pływające po lewej stronie. Zachowują się jak elementy wbudowane .

Aby wyraźnie zobaczyć szerokość kontenera nadrzędnego, możesz zastosować background-color :

• Edytuj kod CSS i dodaj ten kod:

 .container { display: flex; background-color: #f5ca3c; }

Oto jak teraz wygląda kontener:

Zauważyłeś już, że flex-container zachowuje się (w większości) jak element blokowy. Jednak sprawiamy, że kontener zachowuje się jak element inline-level. Aby to zrobić, zmieniamy wartość właściwości display na inline-flex .

• Edytuj kod CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

Elastyczny kontener jest teraz elementem śródliniowym, jak widać na tym obrazku:

Zanim przejdziemy do dalszej części tego samouczka, zmieńmy zachowanie na element blokowy.

• Edytuj kod CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Krok 4. Zmiana wierszy Flexbox na kolumny

Do tej pory stworzyliśmy flex-container . Widzieliśmy również, jak zachowują się elementy potomne tego kontenera po przekształceniu w flex-items .

Teraz nauczmy się, jak zmienić kierunek naszego układu. Domyślny kierunek flex-container jest oparty na wierszu. Możesz jednak zmienić to zachowanie za pomocą właściwości flex-direction .

• Edytuj kod CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Po zaktualizowaniu kodu nie zobaczysz żadnych zmian, ponieważ flex-direction: row jest wartością domyślną. Zróbmy naprawdę widoczną zmianę: zmieńmy kierunek flex-container na column .

• Edytuj kod CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Kolejny obraz przedstawia zmianę w układzie:

Teraz kierunek flex-container jest oparty na osi bloku (kolumnie). Elementy flex-items są wyrównane od góry do dołu, a każdy z tych elementów zajmuje całą szerokość swojego kontenera nadrzędnego. Zachowują się więc jak elementy blokowe.

Teraz możesz zacząć kwestionować pewne rzeczy w tym momencie: „ Hej, mój układ wygląda teraz dokładnie tak samo, jak pierwszy układ w tym samouczku! ” To prawda. Wizualnie nie ma różnicy między obecnym układem z flex-container a pierwszym układem tego przykładu z kontenerem blokowym.

Jednak teraz mamy większą kontrolę. Na przykład możesz odwrócić kierunek elementów flex-items pomocą właściwości row-reverse i column-reverse .

• Edytuj kod CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Ten obraz pokazuje, jak Twój układ będzie wyglądał po tej nowej aktualizacji:

Aby zobaczyć odwrócone flex-items w wierszu, zmień wartość właściwości flex-direction .

• Edytuj kod CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Podsumowanie Flexbox

Gratulacje! Nauczyłeś się deklarować flex-container . Widziałeś, jak zachowują się flex-items flex w zależności od kierunku flex-direction zastosowanego do ich kontenera nadrzędnego ( row lub column ). Wiesz też, jak odwrócić kolejność elementów flex-items .

Wszystkie te zmiany są dokonywane za pomocą CSS, więc nie wpłynie to na strukturę znaczników HTML Twojej witryny. To jedna z zalet korzystania z Flexbox. Odwracanie kolejności elementów flex-items to tylko jedna z funkcji tego modułu CSS. Jest o wiele więcej do nauczenia się o Flexboxie, więc za kilka dni zapoznaj się z Częścią 2 tego samouczka.

Więcej samouczków z tej serii

• CSS Flexbox #2. Jak korzystać z właściwości uzasadnienia treści
• CSS Flexbox #3. Właściwość align-items
• CSS Flexbox #4. Nieruchomość flex-grow