#33. Dwukolumnowy szkielet

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

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!