Wprowadzenie
Flexbox to metoda dzięki której zbudujemy layout. Został wprowadzony wraz z CSS3. Powstał w odpowiedzi na potrzebę pozyskania “narzędzia” do tworzenia układów stron.
Do tej pory, również na moim blogu, używaliśmy np. właściwość float. Dzięki poznawanej metodzie nie będzie konieczności już z niej korzystania.
Podstawą dla podejścia flexbox jest kontener, wewnątrz którego zarządzamy elementami i sposobem ich ułożenia. Sposobem wyświetlania elementu sterujemy deklarując właściwość display.
Oprócz właściwości takich jak block, inline, none dochodzą dwie nowe wartości: flex. Jest to blokowy typ kontenera, który zajmuję zawsze 100% dostępnej szerokości. Inline-flex jest to kontener liniowy, czyli zajmuje tylko tyle miejsca ile potrzebuje by wyświetlić zawartość.
Spójrz na poniższy przykład. Zobaczysz różnice między flexem a inline-flexem
flamboyant-black-zq1x0
flamboyant-black-zq1x0 by danielminschinski
Wyświetlanie elementów
Elementami wewnątrz takiego “elastycznego” kontenera zarządzamy za pomocą wielu dostępnych właściwości. Podstawową jest flex, który określa stosunek zajmowanej między elementami.
Ustawiając wszystkim elementom wewnątrz kontenera właściwość flex: 1; to podział przestrzeni będzie równy. Działa to na zasadzie proporcji, gdzie np. są 3 boxy obok siebie i każdy ma wartość 1, wtedy 1+1+1+ = 3 (100% przestrzeni) a więc 33,3% (szerokość pojedynczego elementu).
Spójrz na ostatni przykład i przeanalizuj powyższą teorię.
Zarządzanie proporcjami
Dzięki powyższej właściwość którą poznaliśmy, możemy w łatwy sposób zarządzać przestrzenią jaką zajmują poszczególne elementy w wierszu, w ramach kontenera, w typie flex.
Działanie jest proste. Jeśli mamy dwa argumenty i pierwszemu nadamy flex: 1; a drugiemu flex: 3; to drugi element otrzyma trzy razy więcej przestrzeni niż pierwszy. Finalnie proporcja będzie taka, że pierwszy otrzyma 25% szerokości a drugi 75%.
Wspominałem przed chwilą, że chodzi tu o proporcje. Jeżeli przykładowo pierwszemu elementowi w kontenerze nadamy flex: 2; a drugiemu flex: 6; to drugi też będzie 3 razy szerszy niż pierwszy. Wartości mogą być dowolnie duże. Przede wszystkim liczą się proporcję między nimi.
Poniżej dodaję przykład zastosowania proporcji. Przeanalizuj style.
sharp-bassi-8iw6w
sharp-bassi-8iw6w by danielminschinski
Właściwość order
Stosując w naszym kodzie flexboxa, możemy zarządzać pozycją danego elementu, tzn. kolejnością. Dzięki temu możemy dowolnie uporządkować pozycje, niezależnie od tego w jakiej kolejności są napisane w dokumencie HTML.
Ustawiamy to za pomocą nowej właściwości CSS: order. Nadajemy ją danemu elementowi i przyjmując wartości liczbowe, zarówno dodatnie lub ujemne, określamy jego kolejność. Domyślna wartość to 0 i podąża w górę, czyli pierwszy element w HTML w kontenerze flex ma order: 0; drugi order: 1; trzeci order: 2; itd…
Przykładowo, chcemy żeby nasz element był wyświetlany przed wszystkimi innymi w kontenerze. Mamy świadomość, że pierwszy element ma domyślnie order: 0; Aby ulokować nasz element przed tym, który teraz jest wyświetlany jako pierwszy, nadajemy temu elementowo HTML styl order: -1;
Spójrz na poniższy przykład. Pobaw się wartościami w “orderach”😉
keen-yonath-hwdqj
keen-yonath-hwdqj by danielminschinski
Pierwszy post o nowej metodzie układania elementów na stronie za nami😉 Prawda że przyjemniejsze niż zabawa z float? Może spytacie się dlaczego od razu nie zająłem się flexsem? Ponieważ obydwie właściwości działają na wielu stronach internetowych – taka moja odpowiedź😉
W następnym materiale pociągnę temat dalej – kierunki wyświetlania oraz kolejne nowe właściwości😉
Tak więc do kolejnego – nowych czytelników chciałbym zaprosić do zapisywania się do poniższego newslettera 🔽🔽
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA