Praktyczne zastosowanie FlexBox. Flexbox: nowa zasada układu CSS. Dowiedz się Flexbox i jak go stosować.

O tym, jak łatwo pracować z Flexbox jako przykład układu szablonu witryny z wiadomościami.

Uwierz mi, nie ma potrzeby szczegółowej analizy wszystkich aspektów pracy z Flexboksem, jeśli chcesz zacząć z niego korzystać teraz. W tym przewodniku autor zapozna Cię z niektórymi funkcjami Flexboksa i stworzy „układ wiadomości”, taki jak ten, który można zobaczyć w The Guardian.

Powodem, dla którego autor korzysta z Flexboksa, jest duża liczba funkcji, które zapewnia:
- łatwość tworzenia adaptacyjnych kolumn;
- tworzenie kolumn o tej samej wysokości;
- możliwość dociśnięcia zawartości do dna pojemnika.

Chodźmy!

1. Zacznij od utworzenia dwóch kolumn

Tworzenie kolumn za pomocą CSS zawsze wiązało się z pewnymi trudnościami. Przez długi czas do wykonywania tego zadania powszechnie używane były (i są używane) zmiennoprzecinkowe i / lub tabele, ale każda z tych metod miała (i ma) swoje wady.

Z kolei Flexbox upraszcza ten proces, mając szereg zalet, takich jak:

Pisanie czystszego kodu: wszystko, co musimy zrobić, to utworzyć kontener z regułą wyświetlacz: flex;
- elastyczność: możemy zmieniać rozmiar, rozciągać i wyrównywać kolumny, zmieniając kilka linii CSS;
- znaczniki semantyczne;
- Ponadto użycie Flexboksa eliminuje potrzebę anulowania przepływu, aby uniknąć nieprzewidzianego zachowania układu.

Zacznijmy od utworzenia dwóch kolumn, z których jedna zajmie 2/3 szerokości naszego kontenera, a druga - 1/3 jego części.

Istnieją tutaj dwa elementy:

Pojemnik kolumny;
- dwoje dzieci kolumnaz których jeden ma dodatkową klasę kolumna głównaktórego używamy później, aby poszerzyć kolumnę.

Kolumny (wyświetlanie: flex;). Kolumna (flex: 1;). Kolumna główna (flex: 2;)
Ponieważ kolumna główna ma wartość flex równą 2 , ta kolumna zajmie dwa razy więcej miejsca niż druga.

Dodaj trochę szaty graficznej, dzięki czemu otrzymamy:

Kliknij, aby zobaczyć w akcji

2. Ustaw każdą kolumnę w pojemnik typu flexbox

Każda z dwóch kolumn będzie zawierać kilka pionowo ułożonych artykułów, dlatego z kolei musimy również wykonać pojemniki Flexbox z tych dwóch elementów.

Potrzebujemy więc artykułów:

Zostały one ustawione pionowo wewnątrz kolumny pojemnika;
- zajmował całą dostępną przestrzeń.

Zasada kierunek zgięcia: kolumnaokreślone dla kontenera wraz z regułą flex: 1Określony dla elementu potomnego pozwala artykułowi wypełnić całe wolne miejsce w pionie, a wysokość pierwszych dwóch kolumn pozostanie niezmieniona.

Kliknij, aby zobaczyć w akcji

3. Wykonujemy pojemnik z artykułu

Teraz, aby jeszcze bardziej rozszerzyć nasze możliwości, zaprezentujmy każdy artykuł jako kontener typu flexbox. Każdy taki pojemnik będzie zawierał:

Nagłówek
- akapit;
- panel informacyjny z nazwiskiem autora i liczbą komentarzy;
- jakiś obraz adaptacyjny.

Tutaj używamy Flexboksa, aby „przesunąć” panel informacyjny na dół elementu. Teraz spójrz, jaki wynik oczekujemy.

A oto sam kod:

.article (display: flex; flex-direction: column; flex-base: auto; / * Ustawia początkowy rozmiar elementu w zależności od jego zawartości * /) .article-body (display: flex; flex: 1; kierunek flex: kolumna;) .article-content (flex: 1; / * Content wypełnia całą pozostałą przestrzeń, dociskając w ten sposób panel informacyjny do dołu * /)
Elementy w artykule są ułożone pionowo za pomocą reguły. kierunek zgięcia: kolumna.

Zastosowaliśmy również nieruchomość flex: 1 do elementu treść artykułu, rozciągając w ten sposób całą wolną przestrzeń i naciskając informacje o artykule do dna. Wysokość kolumn w tym przypadku nie ma znaczenia.

Kliknij, aby zobaczyć w akcji

4. Dodaj niektóre zagnieżdżone kolumny

W rzeczywistości potrzebujemy lewej kolumny, aby dołączyć jeszcze kilka kolumn. Dlatego musimy zastąpić drugi element odpowiedzialny za artykuł pojemnikiem kolumnyktóre wykorzystaliśmy wcześniej.

Ponieważ chcemy, aby pierwsza zagnieżdżona kolumna była szersza, dodaj klasę do elementu kolumna zagnieżdżona, aw CSS wskażemy:

Kolumna zagnieżdżona (flex: 2;)
Teraz ta kolumna będzie dwa razy szersza niż druga.

Kliknij, aby zobaczyć w akcji

5. Tworzymy pierwszy artykuł w układzie poziomym

Pierwszy artykuł jest naprawdę duży. Aby efektywnie wykorzystać przestrzeń na ekranie monitora, zmieńmy jego orientację na poziomą.

Pierwszy artykuł (flex-direction: row;). Pierwszy artykuł. Article-body (flex: 1;). Pierwszy artykuł. Article-image (wysokość: 300px; zamówienie: 2; padding-top: 0; szerokość: 400px;)
własność zamówienie W tym przypadku odgrywa dużą rolę, ponieważ pozwala zmieniać kolejność elementów HTML bez zmiany znaczników HTML. W rzeczywistości, artykuł-obraz w kodzie idzie przed elementem artykuł-ciałoale zachowuje się, jakby stał za nim.

Kliknij, aby zobaczyć w akcji

6. Tworzenie układu adaptacyjnego

Teraz wszystko wygląda tak, jak chcieliśmy, choć trochę spłaszczone. Naprawmy to, dodając elastyczność naszemu układowi.

Jedną z wielkich zalet Flexboksa jest po prostu usunięcie reguły wyświetlacz: flex w kontenerze, aby całkowicie go odłączyć (Flexbox), a pozostałe jego właściwości (np wyrównaj elementy lub zgiąć) pozostaną pracownikami.

W rezultacie możemy aktywować układ adaptacyjny za pomocą Flexbox tylko wtedy, gdy jest to konieczne.

Mamy zamiar usunąć wyświetlacz: flex z selektorów .kolumny i .kolumnazamiast „pakować” je do zapytania medialnego:

@media screen i (min-width: 800px) (.columns, .column (display: flex;))
To wszystko! Na ekranach o małej rozdzielczości wszystkie artykuły będą ułożone jeden na drugim, a na ekranach o rozdzielczości ponad 800 pikseli w dwóch kolumnach.

7. Dodaj wykończenia

Aby układ wyglądał bardziej atrakcyjnie na dużych ekranach, dodajmy kilka poprawek CSS:

@media screen i (min-width: 1000px) (.pierwszy artykuł (kierunek wygięcia: wiersz;). .pierwszy artykuł .article-body (flex: 1;). .pierwszy artykuł .article-image (wysokość: 300px ; zamówienie: 2; padding-top: 0; szerokość: 400px;). główna kolumna (flex: 3;). nowa kolumna (flex: 2;))
Treść pierwszego artykułu jest wyrównana poziomo: tekst znajduje się po lewej stronie, a obraz po prawej stronie. Ponadto główna kolumna stała się teraz szersza (75%). To samo dotyczy zagnieżdżonej kolumny (66%).

A oto wynik końcowy!

Kliknij, aby zobaczyć w akcji

Wniosek

Teraz sam widzisz, że możesz używać Flexboksa w swoich projektach bez zagłębiania się we wszystkie jego subtelności, a stworzony układ jest tego wyraźnym przykładem. Przynajmniej autor naprawdę ma na to nadzieję.

Flexbox to zupełnie nowy zestaw właściwości CSS, który umożliwia projektantom układów tworzenie elastycznych układów dla witryn. Doskonale nadaje się do tak zwanych układów responsywnych, ponieważ drastycznie zmniejsza złożoność układu. Nowoczesne przeglądarki (w tym IE10 +, iOS i mobilne przeglądarki Andrioid) obsługują już Flexboksa, więc jeśli nie słyszałeś o Flexboksie, nadszedł czas na eksplorację.

Flexbox gotowy do użycia

Sieć została pierwotnie pomyślana jako mechanizm wymiany dokumentów naukowych. Od tego czasu technologia zrobiła duży krok naprzód, ale nadal korzystamy z CSS, których korzeniami są te publikacje cyfrowe.

Rzeczywiście, układ CSS i pozycjonowanie elementów na stronie są jednymi z najtrudniejszych koncepcji dla projektantów układu, niezależnie od ich doświadczenia. W przypadku układu używają takich właściwości, jak zmiennoprzecinkowy, wyczyść, display: block, display: inline do układów layoutu swoich witryn. Ale teraz, dzięki nowej właściwości CSS display: flexbox, możesz określić kierunek, lokalizację i odstępy między elementami strony.

Wyświetl: -webkit-box; / * OLD - iOS 6-, Safari 3.1-6 * / display: -moz-box; / * OLD - Firefox 19- (buggy, ale głównie działa) * / display: -ms-flexbox; / * TWEENER - IE 10 * / display: -webkit-flex; / * NOWOŚĆ - Chrome * / display: flex; / * NOWOŚĆ, Spec - Opera 12.1, Firefox 20+ * /

Flexbox to eleganckie rozwiązanie długiego, mylącego problemu z układem. W ciągu ostatnich kilku lat koderzy czekali, aż przeglądarki będą obsługiwały nową właściwość display: flexbox, i wreszcie się stało - najnowsze wersje wszystkich głównych przeglądarek obsługują tę funkcję. Więcej informacji na temat wsparcia można znaleźć.

Korzystanie z Flexbox i jego właściwości

Łączenie zapytań o media Flexbox i CSS to potężne narzędzie. W poniższym przykładzie stworzyłem uproszczoną wersję strony głównej witryny Treehouse przy użyciu nowoczesnego podejścia mobilnego i flexbox. Otwórz ten przykład i zmień rozmiar okna przeglądarki.

Na pierwszy rzut oka może się wydawać, że przykład nie jest niczym specjalnym, ale jeśli spojrzysz na kod, możesz zobaczyć, że układ został wykonany bez użycia właściwości float: left lub float: right. Właściwości display: block lub display: inline również nie są używane.

WYŚWIETLACZ Właściwość: FLEX

wyświetl: flex | inline-flex

Właściwość display: flex jest stosowana do kontenera nadrzędnego, który staje się „ elastyczny pojemnik„(elastyczny pojemnik), a także wszyscy jego bezpośredni potomkowie są„ elastycznymi elementami ”(elastyczne elementy). Elastyczny pojemnik ma główna oś, który wyznacza główny kierunek jego bezpośrednich potomków (elementy elastyczne). Oś poprzeczna prostopadle do głównej osi. Obie te osie mają zestaw właściwości, dzięki którym można kontrolować położenie elementów elastycznych względem siebie w kontenerze.

Możesz również utworzyć zagnieżdżone kontenery Flex, jak ja to zrobiłem w powyższym przykładzie, ponieważ właściwość display: flex nie jest dziedziczona. Bloki z klasami .header i.nav mają przypisaną właściwość display: flex. Jest to podobne do implementacji wierszy i kolumn w ramach Foundation CSS.

Uwagi:

• Kolumny CSS kolumny nie działają z elastycznym pojemnikiem.
• float, clear i vertical-align nie działają z elementami elastycznymi

FLEX-DIRECTION Właściwość

kierunek zgięcia: rząd | odwrócenie wiersza | kolumna | odwrócenie kolumny

• rząd (domyślnie): od lewej do prawej dla ltr, od prawej do lewej dla rtl;
• odwrócenie wiersza: od prawej do lewej dla ltr, od lewej do prawej dla rtl;
• kolumna: podobny do rzędu, od góry do dołu;
• odwrócenie kolumny: podobny do odwrotnego rzędu, od dołu do góry.

Właściwość flex-direction określa kierunek głównej osi. Oś główna określa kierunek i niekoniecznie poziomo, na przykład w przeglądarkach mobilnych wszystkie elementy kontenera (element elastyczny) są zgrupowane w 1 kolumnie jedna po drugiej. Jest to określone za pomocą flex-direction: column. Aby elementy pojemnika były ustawione w kierunku poziomym, wystarczy ustawić kierunek flex: rząd.

Ponieważ domyślna wartość właściwości flex-direction: row wynosi zatem, nawet jeśli jej nie zadeklarujesz, elementy elastycznego kontenera będą poziome.

Właściwość FLEX

flex: brak | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

Wartość domyślna: flex: 0 1 auto.

własność zgiąć używany do elementów elastycznych pojemników. Jest to krótki wpis, za pomocą którego można ustawić jednocześnie kilka oddzielnych właściwości: flex-grow, flex-shrink i flex-base.

Właściwości zginania i kurczenia elastycznego określają, ile przestrzeni każdy element elastycznego pojemnika zajmie względem siebie. Domyślnie flex-grow: 0 i flex-shrink: 1. Oznacza to, że wszystkie elementy będą do siebie proporcjonalne.

Właściwość flex-base określa rozmiary elementów, które mają wypełnić całą przestrzeń elastycznego pojemnika. Wartość tej właściwości to automatyczny.

Ostatnie 2 właściwości flex-shrink i flex-base są opcjonalne. W powyższym przykładzie ustawiłem wartość flex: 1 dla bloku z klasą .nav, co jest takie samo, jeśli napiszesz do niego flex-grow: 1. Kolejnym elementem flex w pliku container.header jest element h1 z class.logo, który jest ustawiony na flex-grow: 0, więc element .nav zawsze będzie zajmował więcej miejsca niż element.logo.

JUSTIFY-CONTENT Właściwość

justify-content: flex-start | elastyczny koniec | centrum | odstęp między | kosmos

Jedna z moich ulubionych właściwości, właściwość justify-content określa wyrównanie względem głównej osi, pomagając rozdzielić pozostałą wolną przestrzeń wewnątrz elastycznego pojemnika, na przykład, gdy jego elementy nie są już „rozciągnięte” lub rozciągnięte, ale osiągnęły już maksymalny rozmiar. Pozwala także w pewien sposób kontrolować wyrównanie elementów, gdy wykraczają poza granice linii.

• elastyczny start (domyślnie): elementy są przenoszone na początek linii;
• elastyczny koniec: elementy są przesunięte na koniec linii;
• centrum: elementy są wyrównane w środku linii;
• przestrzeń pomiędzy: elementy są rozmieszczone równomiernie (pierwszy element na początku linii, ostatni na końcu);
• kosmos: Elementy są rozmieszczone równomiernie z jednakową odległością między nimi a granicami linii.

Ilustracja działania właściwości justyfy-content:

W moim przykładzie, w bloku z klasą .header, zarejestrowałem wartość justify-content: space-between. Oznacza to, że pierwszy element elastycznego pojemnika będzie znajdować się na początku głównego startu (patrz obraz w rozdziale WYŚWIETLANIE: Właściwość FLEX), a ostatni element będzie znajdować się na końcu głównego końca. Wszystkie elementy kontenera elastycznego znajdujące się między pierwszym a ostatnim zostaną rozłożone równomiernie.

W przypadku elementu z klasą .nav użyłem właściwości justify-content: space-around do równomiernego rozmieszczenia całej przestrzeni z wcięciem wokół każdego elementu elastycznego kontenera.

W areszcie

Podałem tylko niektóre właściwości modułu flexbox. Jest to dość nowa technologia układu, a ponieważ jest wprowadzana do projektów, uzupełnię ten artykuł o nowe przydatne właściwości, które znacznie uproszczą tworzenie wysokiej jakości responsywnych układów dla stron internetowych.

Flexbox to wygodna technologia układu, która może stać się niezbędnym narzędziem do tworzenia szablonów HTML.

Podczas tworzenia projektów każdy z nich ma określoną strategię układu. Wiele osób pisze czysty HTML lub korzysta z popularnych frameworków. Jeśli projektant układu czuje się komfortowo podczas pracy ze znanymi technologiami i osiąga sukces, jest to wskaźnik dobrego specjalisty. Ale Flexbox może stać się niezbędnym pomocniczym lub podstawowym narzędziem do organizacji właściwego kodu.

Przez długi czas programiści używali tabel, elementów pływających, bloków wbudowanych i innych właściwości CSS do układów, aby nadać blokom pożądaną lokalizację. Proste rzeczy, takie jak centrowanie pionowe, były dość skomplikowane. Tworzenie układu opartego na elastycznych siatkach jest uważane za kompetentną praktykę, dlatego szeroko stosowane są szkieletowe struktury CSS.

Główną ideą układu z Flexbox jest umożliwienie kontenerowi zmiany szerokości / wysokości (i kolejności) jego elementów, aby jak najlepiej wypełnić przestrzeń (w większości przypadków, aby obsługiwać wszystkie typy wyświetlaczy i rozmiarów ekranu).

Główna specyfikacja Moduł CSS Flexible Box Layout (lub po prostu Flexbox) - zapewnia doskonałe narzędzia do rozwiązywania różnorodnych zadań. Flexbox umożliwia kontrolowanie rozmiaru, kolejności i wyrównania elementów wzdłuż kilku osi. Możesz także kontrolować rozkład wolnej przestrzeni między elementami i wiele więcej.

Flexbox ma kilka zalet:

1. Już sama nazwa „flex” wyjaśnia, że \u200b\u200bwszystkie bloki można bardzo łatwo uelastycznić. Niezbędne elementy można ściskać i rozciągać według specjalnych zasad, zajmując w ten sposób całą niezbędną przestrzeń.
2. Linię bazową tekstu można łatwo wyrównać w pionie i poziomie.
3. Kolejność elementów w szablonie nie odgrywa decydującej roli. W razie potrzeby można go zmienić w stylach, co jest szczególnie ważne w przypadku niektórych aspektów układu adaptacyjnego.
4. Aby wypełnić całe przewidziane miejsce, elementy mogą automatycznie ustawiać się w szeregu w kilku rzędach lub kolumnach.
5. Większość języków świata ma formę pisania od prawej do lewej rtl (od prawej do lewej), w przeciwieństwie do zwykłego ltr (od lewej do prawej). Cechą f lexboksa jest to, że jest do tego przystosowany, ponieważ dla niego istnieje koncepcja początku i końca, a nie prawa i lewa. W przeglądarkach z ustawieniami RTL wszystkie elementy są automatycznie układane w odwrotnej kolejności.
6. Składnia reguł CSS jest intuicyjna i łatwa do nauczenia.

Historia Flexbox

• 2008 rok - Grupa robocza CSS omawia aplikację „Flexible Box Model” opartą na XUL (XML User Interface Language - język znaczników w aplikacjach Mozilla) i XAML (Extensible Application Markup Language - język znaczników dla aplikacji Microsoft).
• rok 2009 - Opublikowano projekt „Elastycznego modułu układu skrzynek”. Chrome i Safari dodają częściową obsługę, ponieważ Mozilla zaczyna obsługiwać składnię podobną do XUL znaną jako Flexbox 2009. Jeśli podczas czytania posta na blogu lub szukania informacji o Flexboksie z dowolnego innego źródła natrafisz na wyrażenia takie jak display: box; lub właściwości takie jak box - (*), oznacza to, że masz nieaktualną wersję Flexbox, model 2009.
• 2011 r - Tab Atkins przejmuje rozwój Flexbox i publikuje 2 wersje robocze. W tych wersjach składnia zmienia się znacznie. Chrome, Opera i IE 10 implementują obsługę tej składni, znanej jako flexbox 2011.
• 2012 rok - składnia została zmieniona i poprawiona ponownie. Specyfikacja otrzymuje status Rekomendacji dla kandydatów i staje się znana jako „flexbox 2012”. Opera wprowadza obsługę nieprefiksową, Chrome obsługuje aktualną specyfikację z prefiksami, a Mozilla bez nich, IE10 dodaje obsługę przestarzałej składni „flexbox 2011”.
• Od 2014 r roku - Wszystkie nowe przeglądarki obsługują najnowszą specyfikację (nawet Internet Explorer 11). Jeśli jakikolwiek podręcznik Flexboksa lub post na blogu zawiera konstrukcje takie jak display: flex; i flex- (*), wyświetlają bieżące informacje zawarte w bieżącej wersji specyfikacji.

Obsługa przeglądarki

Dziwne, ale przestarzała składnia próbki z 2009 roku jest całkiem dobra wspierany przez Obsługa większości przeglądarek jest zaimplementowana w: Chrome, Firefox 2+, Safari 3.1+ itp. Jest dostępna prawie wszędzie, z wyjątkiem IE 9 i wcześniejszych wersji IE i Opera. Niestety, wdrożenie tej technologii w przeglądarkach było niepełne i częściowo niespójne, co doprowadziło do zmiany specyfikacji.

Pomimo faktu, że stara składnia jest obsługiwana przez przeglądarki, jej użycie nie jest zalecane, ponieważ stara wersja specyfikacji nie jest już istotna. W przyszłości, po pewnym czasie, przeglądarki z pewnością przestaną go obsługiwać. W każdym razie, ponieważ nowa składnia jest znacznie łatwiejsza do nauczenia się i zastosowania, najprawdopodobniej jej implementacja będzie głębsza. Przeglądarki, które nadal nie obsługują modułów Flexbox, zaczną to robić w nowej formie, przewidzianej w najnowszej specyfikacji, która otrzymała status CR. ( Rekomendacja dla kandydatów - * kandydat na zalecenie standardu, co oznacza, że \u200b\u200bjest on technicznie gotowy do wdrożenia i nie powinien podlegać zmianom).

Jeśli chodzi o IE 10, jest to chyba jedyny przypadek obsługi pośredniej, a nie doskonałej wersji Flexboksa (która korzysta z display: flexbox; wartość). (* Ponadto wymaga użycia prefiksu dostawcy -ms-).

Podstawowa składnia

Ponieważ flexbox to cały moduł, a nie tylko jedna właściwość, łączy wiele właściwości. Niektóre z nich powinny dotyczyć kontenera (element nadrzędny, tzw elastyczny pojemnik), podczas gdy inne właściwości mają zastosowanie do elementów potomnych, lub zginać przedmioty.

Aby rozpocząć korzystanie, musisz określić kontener wyświetlacz: flex lub wyświetlacz: inline-flex .

Flex_container (display: flex;)

Główne właściwości elastycznego pojemnika.

Jedną z podstawowych koncepcji w Flexbox są osie.

• Główna oś Flex-pojemnik to kierunek, w którym budowane jest ustawienie wszystkich jego dzieci.
• Oś poprzeczna Czy kierunek jest prostopadły do \u200b\u200bgłównej osi.

Domyślnie główna oś w ustawieniach Ltr znajduje się od lewej do prawej, a oś poprzeczna od góry do dołu. Korzystając z podstawowej właściwości flex-direction css, można ustawić kierunek głównej osi kontenera flex.

flex-direction - kierunek głównej osi

Demonstracja głównych właściwości elastycznego pojemnika

Dostępne wartości kierunek flex:

• rząd (domyślna wartość): od lewej do prawej (w rtl od prawej do lewej)
• odwrócenie wiersza : od prawej do lewej (w rtl od lewej do prawej)
• kolumna : z góry na dół
• odwrócenie kolumny : w dół w górę

justify-content - wyrównanie na głównej osi.

Właściwość Css justify-content główny oś.

Dostępne wartości justify-content:

• elastyczny start (domyślna wartość): bloki są dociskane do początku głównej osi
• elastyczny koniec : bloki dociśnięte do końca głównej osi
• centrum : bloki znajdują się w środku głównej osi
• przestrzeń pomiędzy : pierwszy blok znajduje się na początku głównej osi, ostatni blok na końcu, wszystkie pozostałe bloki są równomiernie rozmieszczone w pozostałej przestrzeni.
• kosmos : wszystkie bloki są równomiernie rozmieszczone wzdłuż głównej osi, równo dzieląc całą wolną przestrzeń.

align-items - wyrównanie na osi poprzecznej.

Właściwość Css wyrównaj elementy określa sposób wyrównywania elementów poprzeczny oś.

Dostępne wartości wyrównaj elementy:

• elastyczny start : bloki dociśnięte do początku osi poprzecznej
• elastyczny koniec : bloki dociśnięte do końca osi poprzecznej
• centrum : bloki znajdują się w środku osi poprzecznej
• poziom podstawowy : bloki wyrównane do linii bazowej
• rozciągać (domyślna wartość) : bloki są rozciągnięte, zajmując całą dostępną przestrzeń na osi poprzecznej, wciąż biorąc pod uwagę minimalna szerokość / maksymalna szerokość jeśli są podane.

Właściwości CSS kierunek flex , justify-content, wyrównaj elementy Musi być nakładany bezpośrednio na elastyczny pojemnik, a nie na jego dzieci.

Wieloliniowa organizacja bloków w elastycznym pojemniku.

flex Wrap

Wszystkie powyższe przykłady zostały zbudowane z uwzględnieniem jednokreskowego (jednokolumnowego) układu bloków. Należy powiedzieć, że domyślnie elastyczny pojemnik zawsze umieszcza bloki wewnątrz siebie w jednej linii. Ale specyfikacja obsługuje również tryb wieloliniowy. Wielowierszowy wewnątrz kontenera elastycznego odpowiada za właściwość flex-wrap CSS.

Dostępne wartości flex Wrap:

• nowrap (domyślna wartość): bloki są ułożone w jednej linii od lewej do prawej (w rtl od prawej do lewej)
• owinąć : bloki są rozmieszczone w kilku poziomych rzędach (jeśli nie pasują do jednego rzędu). Śledzą się od lewej do prawej (w rtl od prawej do lewej)
• zawijaj do tyłu : taki sam jak owinąćale bloki są w odwrotnej kolejności.

flex-flow - wygodny skrót do flex-direction + flex-wrap

W rzeczywistości, flex-flow daje możliwość w jednej właściwości opisania kierunku głównej i wielowierszowej osi poprzecznej. Domyślna flex-flow: teraz wiersz .

Flex_container (flex-direcrion: column; flex-wrap: wrap;) / * lub * / .flex_container (flex-flow: wrap wrap;)

wyrównaj zawartość

Istnieje również własność wyrównaj zawartość , która określa, w jaki sposób wynikowe rzędy bloków zostaną wyrównane w pionie i w jaki sposób będą one dzielić całą przestrzeń kontenera elastycznego.

Ważny: wyrównaj zawartość działa tylko w trybie wielu linii (tj. w przypadku flex-wrap: wrap; lub flex-wrap: wrap-reverse;).

Dostępne wartości zawartości wyrównania:

• elastyczny start : rzędy bloków wciśnięte na początek elastycznego pojemnika.
• elastyczny koniec : rzędy bloków dociśnięte do końca elastycznego pojemnika
• centrum : rzędy bloków znajdują się na środku elastycznego pojemnika
• przestrzeń pomiędzy : pierwszy rząd bloków znajduje się na początku elastycznego pojemnika, ostatni rząd bloków jest blokiem na końcu, wszystkie pozostałe rzędy są równomiernie rozmieszczone w pozostałej przestrzeni.
• kosmos  : rzędy bloków są równomiernie rozmieszczone od początku do końca elastycznego pojemnika, równo dzieląc całą wolną przestrzeń.
• rozciągać (domyślna wartość): Rzędy bloków są rozciągnięte, aby zajmowały całą dostępną przestrzeń.

Demo Flexbox

Reguły CSS dla elementów potomnych elastycznego kontenera (elastyczne bloki)

flex-base - podstawowy rozmiar pojedynczego bloku flex

Ustawia początkowy rozmiar osi bloku elastycznego przed zastosowaniem do niego transformacji opartych na innych współczynnikach elastyczności. Można go ustawić w dowolnej jednostce miary (px, em,%, ...) lub auto (domyślnie). Jeśli ustawione na auto, rozmiary bloków (szerokość, wysokość) są traktowane jako podstawa, która z kolei może zależeć od rozmiaru treści, jeśli nie zostanie wyraźnie określona.

flex-grow - „chciwość” pojedynczego bloku flex

Określa, o ile pojedynczy blok elastyczny może być większy niż sąsiednie elementy, jeśli to konieczne. flex-grow przyjmuje wartość bezwymiarową (domyślnie 0)

Przykład 1:

• flex-grow: 1  wtedy będą miały ten sam rozmiar
• Jeśli jeden z nich ma flex-grow: 2  , to będzie 2 razy więcej niż wszyscy inni

Przykład 2:

• Jeśli wszystkie bloki elastycznego opakowania w elastycznym pojemniku mają flex-grow: 3 ,    będą tego samego rozmiaru
• Jeśli jeden z nich ma flex-grow: 12  , będzie 4 razy większy niż wszyscy inni

Tj. Wartość bezwzględna flex-grow  nie określa dokładnej szerokości. Określa stopień „chciwości” w stosunku do innych elastycznych bloków tego samego poziomu.

flex-shrink - współczynnik ściśliwości dla pojedynczego bloku flex

Określa, o ile elastyczny blok zostanie zmniejszony w stosunku do sąsiednich elementów wewnątrz elastycznego pojemnika w przypadku braku wolnej przestrzeni. Domyślna wartość to 1.

flex - krótki opis właściwości flex-grow, flex-shrink i flex-base

Flex_block (flex-grow: 12; flex-shrink: 3; flex base: 30em;) / * lub * / .flex_block (flex: 12 3 30em;)

Demo Flex-Grow, Flex-Shrink i Flex-Base

align-self - wyrównanie pojedynczego giętkiego bloku wzdłuż osi poprzecznej.

Umożliwia zastąpienie właściwości kontenera elastycznego. wyrównaj elementy  dla osobnego bloku elastycznego.

Dostępne wartości wyrównania (te same 5 opcji jak dla wyrównaj elementy)

• elastyczny start  : blok giętki wciśnięty na początek osi poprzecznej
• elastyczny koniec  : blok giętki wciśnięty do końca osi poprzecznej
• centrum  : blok elastyczny umieszczony w środku osi poprzecznej
• baselin  : blok Flex wyrównany do linii bazowej
• rozciągać (domyślna wartość) : flex-block jest rozciągnięty, aby zajmował całą dostępną przestrzeń na osi poprzecznej, biorąc pod uwagę minimalna szerokość / maksymalna szerokość jeśli są podane.

kolejność - kolejność pojedynczego bloku elastycznego w elastycznym pojemniku.

Domyślnie wszystkie bloki następują po sobie w kolejności określonej w html. Jednak kolejność tę można zmienić za pomocą właściwości flex-block linii bazowej. Jest to liczba całkowita i domyślnie wynosi 0.

Wartość zamówienia nie określa bezwzględnej pozycji elementu w sekwencji. Określa wagę pozycji przedmiotu.

W takim przypadku bloki będą podążać jeden za drugim wzdłuż głównej osi w następującej kolejności: Flex blok 5, Flex blok 1, Flex blok 3, Flex blok 4, Flex blok 2

Demo wyrównaj i zamów

   Bootstrap wreszcie zaczął obsługiwać Flexboksa. W Bootstrap 4 Flexbox zostanie włączony dla następujących komponentów:

• cały system grid (mixiny i predefiniowane klasy), który przełączy się z float na display: flex;
• wyświetlanie formularzy wejściowych: tabela; zastąpi display: flex;
• wyświetlą się komponenty multimedialne: tabela;

Użyj Flexboksa - jest super!

Danny Markov

Konstrukcja jest dość prosta - składa się z pojemnika pośrodku, wewnątrz którego mamy nagłówek, sekcję główną, panel boczny i piwnicę. Oto główne „testy”, które musimy wykonać, aby CSS i HTML były tak czyste, jak to możliwe:

1. Umieść cztery główne sekcje układu.
2. Uaktywnij stronę (pasek boczny spada poniżej głównej zawartości na małych ekranach).
3. Wyrównaj zawartość nagłówka - nawigacja w lewo, przycisk po prawej stronie.

Jak widać, dla porównania pozostawiliśmy wszystko tak proste, jak to możliwe. Zacznijmy od pierwszego testu.

Test 1. Umieszczenie sekcji strony

Rozwiązanie Flexbox

Dodaj wyświetlacz: wygnij do pojemnika i ustaw kierunek pionowy dzieci. To ustawia wszystkie sekcje pod sobą.

Kontener (wyświetlacz: flex; kierunek flex: kolumna;)

Teraz musimy upewnić się, że sekcja główna i panel boczny znajdują się obok siebie. Ponieważ kontenery elastyczne są zwykle jednokierunkowe, musimy dodać dodatkowy element.

Następnie ustawiamy ten element do wyświetlania: flex i flex-direction w przeciwnym kierunku.

Owijarka paska głównego i bocznego (wyświetlacz: flex; kierunek flex: rząd;)

Ostatnim krokiem jest ustawienie wymiarów sekcji głównej i paska bocznego. Chcemy, aby główna treść była trzy razy szersza niż pasek boczny, co jest łatwe do zrobienia za pomocą opcji flex lub procenta.

Jak widać, Flexbox zrobił wszystko dobrze, ale potrzebowaliśmy również sporo właściwości CSS oraz dodatkowego elementu HTML. Zobaczmy, jak działa CSS Grid.

Rozwiązanie CSS Grid

Istnieje kilka opcji korzystania z CSS Grid, ale użyjemy składni grid-template-area jako najbardziej odpowiedniej do naszych celów.

Najpierw definiujemy cztery obszary siatki, po jednym dla każdej sekcji strony:

   nagłówek (obszar siatki: nagłówek;). główny (obszar siatki: główny;). pasek boczny (obszar siatki: pasek boczny;) stopka (obszar siatki: stopka;)

Teraz możemy dostosować naszą siatkę i określić lokalizację każdego obszaru. Na początku kod może wydawać się dość skomplikowany, ale gdy tylko zapoznasz się z systemem grid, staje się łatwiejszy do zrozumienia.

Kontener (wyświetlanie: siatka; / * Określamy rozmiar i liczbę kolumn naszej siatki. Jednostka fr działa jak Flexbox: kolumny dzielą wolne miejsce w linii zgodnie z ich wartościami. Będziemy mieć dwie kolumny - pierwsza jest trzy razy druga. * / Szablon siatki -kolumny: 3fr 1fr; / * Łączymy wcześniej wykonane obszary z miejscami w siatce. Pierwszy wiersz jest nagłówkiem. Drugi wiersz jest podzielony między sekcją główną i panelem bocznym. Ostatni wiersz jest stopką. * / grid-template-Obszary: „nagłówek nagłówka” ” główny pasek boczny „„ stopka ”; / * Odstępy między komórkami siatki wynoszą 60 pikseli * / odstęp między siatkami: 60 pikseli;)

To wszystko! Nasz układ będzie teraz odpowiadał powyższej strukturze i skonfigurowaliśmy go tak, abyśmy nie musieli radzić sobie z marginesem ani wypełnieniem.

Test 2. Uaktywnienie strony

Rozwiązanie Flexbox

Ten krok jest ściśle związany z poprzednim. Aby rozwiązać na Flexboksie, musimy zmienić kierunek flexu i dostosować margines.

   @media (max-width: 600px) (.main-and-sidebar-wrapper (flex-direction: column;) .main (margin-right: 0; margin-bottom: 60px;))

Nasza strona jest dość prosta, więc w zapytaniu o media nie ma wiele pracy, ale w bardziej złożonym układzie będziesz musiał dużo powtarzać.

Rozwiązanie CSS Grid

Ponieważ już zdefiniowaliśmy obszary siatki, musimy po prostu przedefiniować ich kolejność w zapytaniu o media. Możemy użyć tego samego ustawienia kolumny.

   @media (max-width: 600px) (.container (/ * Wyrównanie obszarów siatki dla układu mobilnego * / grid-template-Obszary: „nagłówek nagłówka” „główny główny” „boczny pasek boczny” „stopka”;))

Lub możemy przedefiniować cały układ od zera, jeśli uważamy, że to rozwiązanie jest czystsze.

@media (max-width: 600px) (.container (/ * Przenieś siatkę na układ jednokolumnowy * / grid-szablon-kolumny: 1fr; grid-szablon-obszary: „nagłówek” „główny” „pasek boczny” „stopka”;) )

Test 3. Wyrównanie elementów nakrętek

Rozwiązanie Flexbox

Przycisk

Zrobiliśmy już podobny układ do Flexboksa w jednym z naszych starych artykułów -. Technika jest dość prosta:

Nagłówek (display: flex; justify-content: space-between;)

Teraz lista nawigacyjna i przycisk są odpowiednio ustawione. Pozostaje tylko umieścić przedmioty w środku