Flexbox, czyli elastyczne tworzenie stron www
Pojęcie responsywnych stron www każdemu kojarzy się z elastycznymi stronami, które są dostosowane do wyświetlania na różnych rodzajach ekranów. W szczególności pojęcie znane jest osobom na stanowisku frontend developer – osoby odpowiedzialne za część wizualną (techniczną) strony www. Dzisiaj wiodącym trendem jest flexbox.
ŁukaszPodziel się artykułem:
Wprowadzenie
Termin flexbox wprowadzono wraz z wejściem specyfikacji CSS2.1, natomiast wsparcie wraz z CSS3. Flexbox opisuje dynamiczny i elastyczny układ strony w zależności od rozmiaru okna przeglądarki. Cała zabawa z flexbox’em rozpoczyna się od wprowadzenia właściwości do kontenera display: flex;. Wraz z wejściem Bootstrap’a w wersji 4.0 wprowadzono domyślną obsługę flexbox’a, co pozwoli na jeszcze sprawniejsze i efektywniejsze tworzenie.
Przykład
Podstawowe pojęcia oraz wsparcie
Odnoszące się do kontenera:
- display: flex;
- flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap: nowrap | wrap | wrap-reverse;
- flex-flow: <‘flex-direction’> || <‘flex-wrap’>
- justify-content: flex-start | flex-end | center | space-between | space-around;
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Odnoszące się do elementów:
- order: <integer>;
- flex-grow: <number>;
- flex-shrink: <number>;
- flex-basis: <length> | auto;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
Wsparcie idei flexbox mają wszystkie najnowsze przeglądarki – link caniuse. Co do starszych, tutaj jest już różnie, jednak osoby aktywnie działające „na froncie” poradzą sobie z implementacją.
Podsumowanie
Chcąc tworzyć nowoczesne strony, czas „przerzucić” się na flexbox – to oczywiste. Czy wy, korzystacie z flexbox? Podzielcie się w komentarzach.
UPDATE (01.09.2021): Zachęcam także do skorzystania z ciekawego rozwiązania jakim jest generator flexbox, który z pewnością przyspieszy pracę.
