Flexbox Layout, Flexible Box, Flex, różnie na to mówią. Jest to standard definiowania wyglądu dla stron WWW, stosowany z powodzeniem od wielu lat. Problemem, jak zwykle, były przeglądarki oraz to, że składnia Flex nieco się zmieniała w czasie. Oczywiście będziemy się zajmować najnowszą wersją, która jest już bardzo szeroko wspierana i, o ile nie chcesz korzystać z Internet Explorera 9 i innych przedpotopowych wynalazków, powinieneś móc bezpiecznie działać.
Świetna strona Can I Use? wskazuje, że Flex może być stosowany od IE10 (sporo błędów, wspiera wersję z 2012 roku) lub IE11 (nowa wersja, nadal sporo błędów, ale często nie są zauważalne), Edge nie ma problemów, Firefox od wersji 28 (w pełnej wersji), Chrome od wersji 21 z prefiksem lub 29 bez prefiksu, Safari od 6.1 z prefiksem, od 9 bez prefiksu, Opera od 12.1 (bez prefiksu) z małą przerwą na prefiks (wersje 15-16, tak wiem, bez sensu), a potem od wersji 17 bez prefiksu, reszta mniej popularnych, też obsługuje i też już bez prefiksów. Czyli – jest bezpiecznie.
Flex ma na celu zapewnić dobre rozmieszczenie elementów w kontenerach i samych kontenerów, niezależnie od ich rozmiarów, może być nieznany i dynamicznie zmieniamy (pamiętacie height:100% na wszystkim?).
Głównym motywem działania układów Flex jest możliwość zmiany wysokości, szerokości i kolejności elementów, aby jak najlepiej dopasować się do ekranu. Po prostu idealna metoda na RWD (responsive web design). Ważnym elmentem Flex jest to, że nie jest zależny od kierunku, jak bloki (pionowe) i elementy in-line (w poziomie). Flex radzi sobie z jednym i drugim, może się też między nimi przełączać w razie potrzeby.
W naszym kursie skupimy się przez chwilę na teorii, potem zobaczymy jak teoria radzi sobie z praktyką.