Szkielet to podstawa❗
Model flexboxa został stworzony, aby wykorzystywać go do budowy szkieletów (układów) stron www. Poniżej zobaczysz, jak to robić od podstaw.
Aby zbudować elastyczny szkielet, musimy mieć najpierw podstawę w postaci elementów HTML.
Spójrz na poniższy przykład. Przeanalizuj go.
epic-breeze-e6ubq
epic-breeze-e6ubq by danielminschinski
Właściwości kontenera
Czas na właściwości kontenera.
Chcemy żeby wyświetlał się jako element blokowy i pozwalał na użycie flexbox. Wykorzystamy do tego wartość flex z poprzednich lekcji, przypisaną do właściwości display. Sprawia ona, że elementy wewnątrz kontenera są traktowane jako elastyczne obiekty w ramach modelu flexbox.
Drugą, istotną dla nas właściwością, będzie flex-wrap. Domyślnie ma wartość nowrap co oznacza że wiersze nie są zawijane. Co za tym idzie wszystkie elementy są wyświetlane jednym ciągiem (w poziomie lub pionie), bez “łamania” linii.
Jeżeli ustawimy flex-wrap: wrap;, elementy będą przenoszone do kolejnego wiersza, jeżeli będzie to konieczne.
Do ostatniego przykładu dodajmy kontenerowi odpowiedni sposób wyswietlania na flex. Następnie, dodajmy mu styl odpowiadający za przenoszenie elementów do kolejnych wierszy. Aby zobrazować nasz kontener dodaj obramowanie oraz wysokość.
runtime-leftpad-emcz3
runtime-leftpad-emcz3 by danielminschinski
Właściwości elementów
Przejdźmy dalej. Dodajmy właściwość flex do elementów zawierających się w kontenerze. Należy wspomnieć, że dzięki właściwości flex-flow: wrap; na kontenerze pozwalamy aby elementy wyświetlały się w kolejnych wierszach.
Nowością jest to, że jako wartość dla właściwości flex możemy podać nie tylko liczbę ale także wartość procentową np. 100%. Następnie element z taką szerokością flex przerzuci elementy kontenera do kolejnej linii. Przykładem może być nagłówek, aby mógłby być na całą szerokość.
Ostatni przykład wzbogaćmy o następujące właściwości:
- nagłówkowi oraz stopce nadajmy 100% szerokości za pomocą właściwości flex,
- dla klasy sidebar dodajmy właściwość flex z wartością 1,
- contentowi nadajmy szerokość cztery razy większą niż dla sidebar. Użyjemy również do tego flexa.
Dzięki takiej szybkiej zmianie w CSS zbudowaliśmy layout💪
musing-allen-bwnty
musing-allen-bwnty by danielminschinski
Tym materiałem chciałem Wam pokazać jak wygląda w praktyce tworzenie szkieletu za pomocą flexa. Jest to jeden z wielu sposobów na tworzenie layoutu jak już pewnie zauważyłeś/zauważyłaś😉
W kolejnym środowym materiale rozprawie się z budową grida z użyciem flexboxa 💥
Zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶ fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA