Flexbox w CSS & HTML (Samouczek) - rozwijanie responsywnych układów

To cię czeka w kursie Flexbox w CSS i HTML.

Jaka jest struktura modelu Flexbox i dlaczego w ogóle powinno się go używać?

Tutaj zostanie rozpoczęty projekt, w którym będzie dalej pracowano.

Tutaj przedstawiam przykładową strukturę i zintegrowane możliwości debugowania w programie VS-Code za pomocą narzędzi MS Edge. Ponadto w tym filmie po raz pierwszy aktywowany jest układ Flexbox i ustawiana jest jego kierunek.

Jak równomiernie podzielić miejsce lub w określonych proporcjach w układzie Flexbox?

Trochę ćwiczeń, których nie można uniknąć, nie robiąc trochę (paprośnej) matematyki.

Tutaj przedstawiam układ poziomy z dwoma paskami bocznymi, który responsywnie dostosowuje się do szerokości.

Elementy potomne mogą być wyrównane przez kontener flex wzdłuż osi poprzecznej. Tu pokazuję, jak to można ustawić.

Nie tylko w kontenerze można dostosować wyrównanie wszystkich elementów potomnych, za pomocą align-self można to różnie dostosować również dla poszczególnych elementów.

Małe ćwiczenie do indywidualnego dopasowania z kostką.

Nie tylko wzdłuż osi poziomej można wyśrodkować w pojemniku flexowym, można także dostosować wiele rzeczy wzdłuż osi głównej. ;-)

Mały przykład, jak bardzo dobrze można wykorzystać wyśrodkowanie względem osi głównej w częstym układzie.

Aby być elastycznym, trzeba móc określić rozmiar elementów potomnych niezależnie od konkretnej szerokości lub wysokości. Na szczęście istnieje właściwość flex-basis, która pozwala to osiągnąć. Zmieniając kierunek flexboxa, szerokość zamienia się w wysokość i na odwrót. 

O ile powinien wzrosnąć element, gdy dostępna przestrzeń jest większa niż określona wartość flex-basis? Można to precyzyjnie ustawić za pomocą flex-grow.

O ile ma się skurczyć element, gdy miejsca jest mniej niż flex-basis określa? Można to precyzyjnie dostosować za pomocą flex-shrink. 

Elementy potomne mogą nie tylko zmniejszać się, gdy miejsca jest mniej, ale także zostać złamane przez pojemnik. Jak kontrolować to za pomocą flex-wrap, pokazuję w tym filmie.

flex-direction i flex-wrap można łączyć w właściwości flex-flow. Nawet ma to sens, gdy chce się ustawić tylko flex-direction, ponieważ flex-flow jest krótsze. ;-)

Zadanie do flex-wrap.

Odstęp czasami jest konieczny, aby nie sprawić ludzkiemu oku niepotrzebnego dyskomfortu. Na szczęście istnieje właściwość CSS gap, która umożliwia dokładnie to w przypadku elementów potomnych kontenera flex.

Porzadku musi być, zwłaszcza w interfejsach internetowych, ponieważ powinny one być łatwe w obsłudze. Kolejność czasami również musi być ustalona indywidualnie, bez przemieszczania elementów w DOM. W tym celu właściwość CSS order jest bardzo odpowiednia, dzięki której łatwo można zmieniać widoczną kolejność elementów.

Sprawdźmy, czy zrozumieliście kwestię kolejności. Nawet tutaj istnieje druga możliwość osiągnięcia tego samego rezultatu, ale na pewno też na to wpadniecie.

To bardzo często się zdarza, że chce się wyśrodkować elementy, a przede wszystkim tekst zarówno w poziomie, jak i w pionie (!). To, co kiedyś było udręką przed Flexboxem, teraz jest jak kinderbalanga.

Każdy zna go, trójka! Jeśli dostosowuje się do dostępnej przestrzeni, brakuje niewiele do responsywnego designu.

Czy istnieją strony internetowe bez formularzy? Jeśli tak, to nie jest ich wiele. Dlatego bardzo ważne jest, aby je atrakcyjnie rozmieścić, na szczęście dzięki Flexboxowi nie stanowi to problemu.

Bardzo często mamy do czynienia z zagnieżdżonymi układami, ale dzięki elastycznemu układowi nawet takie nie są już dużym wyzwaniem.

Na dzień dzisiejszy istnieje wiele klientów czatów internetowych, a do tego pojawiło się ich jeszcze więcej z chatbotami opartymi na sztucznej inteligencji. Ale jak można zrealizować chat przy użyciu Flexboxa? To pokażę w tym filmie.

Najpóźniej od czasów Web 2.0 na prawie każdej stronie znajduje się galeria. W tym filmie opisuję, jak taki układ może zostać wspaniale zrealizowany przy użyciu Flexbox.

Teraz wszystko powinno być jasne, jeśli chodzi o układ Flex. Na koniec opiszę, co powinniście zrozumieć, co jeszcze możecie zrobić i jakie jeszcze są piękne możliwości układu CSS.