Flexbox to model układu CSS służący do układania elementów w jednym wymiarze (wiersze lub kolumny), który ułatwia tworzenie elastycznych i responsywnych layoutów bez floatów i skomplikowanego pozycjonowania. Włącza się go przez ustawienie na kontenerze właściwości display: flex, dzięki czemu jego dzieci stają się tzw. flex items i podlegają regułom układu elastycznego.
Co można „załatwić” Flexboksem (typowe zastosowania i możliwości):
- Wyrównanie i rozmieszczenie elementów w osi głównej i poprzecznej (np. przestrzeń między elementami, wyśrodkowanie w pionie i poziomie) — idealne do nawigacji, nagłówków, stopek, kart.
- Kierunek ułożenia – w wierszu lub kolumnie, z możliwością zawijania (wrap).
- Elastyczne rozmiary – dzielenie dostępnej przestrzeni proporcjonalnie (flex-grow, flex-shrink, flex-basis), równe wysokości pudełek obok siebie bez „kombinowania” z wysokościami.
- Redukcja złożoności HTML/CSS – mniej dodatkowych wrapperów, brak potrzeby używania floatów czy ujemnych marginesów w typowych układach.
- Jednowymiarowy layout – Flexbox najlepiej sprawdza się, gdy układasz elementy w jednym wymiarze; przy dwuwymiarowych siatkach lepszy jest CSS Grid.
Kluczowe pojęcia:
- Flex container (element-rodzic z display: flex) i flex items (dzieci kontenera).
- Flexbox działa wzdłuż jednej osi (poziomej lub pionowej), co odróżnia go od starszych metod i od CSS Grid.
Inne formy kontaktu (jeśli pytasz o sposoby umieszczania kontaktu na stronie):
- Adres e-mail w linku typu mailto (otwiera domyślnego klienta poczty i może wstępnie wypełnić temat/treść, cc/bcc): przykład atrybutów mailto: subject, body, cc, bcc.
Przykład (jako tekst, nieklikalny):
mailto:[email protected]?subject=Zapytanie&body=Dzień%20dobry%2C%20piszę%20w%20sprawie… - WWW – podaj po prostu tekstowy adres, np. www.twojadomena.pl, bez przekształcania w link.
- Dodatkowo w interfejsie można dodać: numer telefonu jako tel: (np. tel:+48123456789), przyciski do komunikatorów (np. WhatsApp, Messenger) lub formularz kontaktowy; technicznie to elementy HTML/CSS, a linki mogą być zwykłym tekstem na stronie.
Uwaga: tel: i inne schematy linków działają analogicznie do mailto, wywołując odpowiednią aplikację.
Kiedy użyć Flexboxa vs. Grid:
- Flexbox – układy jednowymiarowe (np. pasek nawigacji, poziome listy kart, wyrównywanie elementów).
- Grid – układy dwuwymiarowe (wielokolumnowe i wielorzędowe siatki treści).
Przydatne źródła do nauki (jako tekst):
- W3Schools: w3schools.com/css/css3_flexbox.asp
- No Fluff Jobs – przewodnik po Flexbox: nofluffjobs.com/pl/etc/praca-w-it/css-flexbox-jak-to-dziala-ekspercki-przewodnik-po-elastycznych-ukladach
- Podstawy flexbox (artykuł po polsku): leniwy.eu/news,22,Podstawy-flexbox.html
- Kurs wideo (PL): YouTube — „Kurs HTML & CSS – Flex-box, wstęp do RWD”
