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.

Flexbox, czyli elastyczne tworzenie stron www

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 już z flexbox? Podzielcie się w kometarzach.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.