LBweb Łukasz Bącik
Komentarze: 0

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.

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

dark

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ę.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *