Flexbox to elastyczny model skrzynkowy, wykorzystywany na nowoczesnych stronach internetowych. W poprzednich wersjach stron internetowych używało się modelu tabel lub „float:left;”. Internet odchodzi od starych metod. Używając „display:flex;” możemy tworzyć nowoczesne strony internetowe i aplikacje webowe, które są responsywne i estetyczne.
Pisząc dokładniej o flexboxie – Flexbox to nowoczesny model skrzynkowy służący do segregowania elementów w odpowiednim układzie, który automatycznie dopasuje szerokość obiektów, do szerokości ekranu, na którym jest otwierana strona WWW.
W tym modelu skrzynkowym, używamy pojemnika rodzina oraz dzieci (jednego lub więcej). W pojemniku np. ’container’, który jest div’em, umieszczamy 3 divy dzieci. Tak jak w generatorze flexboxa powyżej. W pojemniku o nazwie ’container’ dodajemy style ’display:flex;’ przez co stosujemy stylizację flex. Dodając odpowiednie fragmenty kodu, możemy ustawiać divy zależnie od siebie, dzięki czemu nie mamy właściwie żadnych ograniczeń. Możemy elastycznie ustawiać divy w kolejności, jakiej tylko chcemy.
Flexbox jest modelem skrzynkowym, a nie układem blokowym jak pisane jest na wielu portalach, czy forach internetowych. Oznacza to, że nie zadziałają na nim działania stosowane na układach blokowych, między innymi vertical-align, czy float.
Osie w modelu skrzynkowym są odpowiednio oznaczone. Oś pozioma nosi nazwę „main axis”, natomiast oś pionowa, to „cross axis”.
Flexbox posiada swoje cechy służące do uporządkowania elementów znajdujących się w sekcji z właściwością selektora display:flex;
Zalecamy przetestowanie wszystkich układów w generatorze flexbox CSS powyżej dla lepszego zrozumienia wszystkich wartości.
Flex-direction określa w jakim kierunku mają być ustawione dzieci kontenera głównego w osi main axis czyli poziomej. Możliwe wartości dla flex-direction to row, row-reverse, column oraz column-reverse. W prostszym języku – flex-direction ustawia elementy w kolumnach lub wierszach, może także odwrócić ich kolejność, co przydaje się w wersjach mobilnych. Wartość domyślna to flex-direction:row;
Flex-wrap umożliwia zastosowanie elementów bardziej w kontekście responsywności. Oznacza to, że jeśli ekran staje się węższy, to możemy ustawić, aby „przeskakiwały” do następnego wiersza lub nie. Wartości, które przyjmuje flex-wrap to nowrap (dzieci będą się zwężać, ponieważ muszą zmieścić się w jednej linii), wrap (gdy zabraknie miejsca, dzieci przeskakują do następnej linii), wrap-reverse (elementy przeskakują do nowej linii, ale w odwrotnej kolejności).
Ten element określa wyrównanie dzieci w pionie względem siebie. Przetestuj powyżej w generatorze, aby lepiej zrozumieć. Działa w wersji z flex-direction: row;
Align-content wyrównuje dzieci kontenera w osi głównej. W prostym języku, align-content ustawia pozycje elementów w całym kontenerze, czy mają być na dole, na górze, po środku, itp.
Ta właściwość wyrównuje elementy do odpowiedniej strony w całym kontenerze. Można by rzec, że działa na wzór text-align. Jeśli ustawimy justify-content: center w generatorze Flexboxa, to elementy kontenera ustawią się na środku. Ciekawymi właściwościami są także space-between oraz space-around.
Sprawdź nasze inne wpisy
Spis treści Wymagania Działanie rozszerzenia Google Chrome Struktura plików Tworzenie katalogu rozszerzenia i włączanie go Zmiany w plikach rozszerzenia – reset Pierwsze rozszerzenie do Google Chrome Plik manifest.json – serce […]
Spis treści Dokumentacja WordPressa Dodanie Bootstrapa do motywu Jakie są podstawowe pliki do tworzenia motywu? Hierarchia plików WordPressa naszego motywu Upload i włączenie motywu Style.css – ważny plik motywu WordPressa […]
Spis treści Szablon briefu strony internetowej do pobrania: Co ma zawierać brief strony internetowej? Podstawowe informacje klienta Przedstaw interesujący Cię styl Opisz czego dotyczyć ma strona Funkcjonalności na stronie Treść […]