[CSS] Flexbox model – inny sposób na responsive web design

Wraz z rozwojem CSS i wraz z rosnącym wsparciem najnowszej wersji języka kaskadowych arkuszy stylów w przeglądarkach internetowych webmasterzy zostają obdarzeni coraz większą paletą narzędzi, które pozwalają na osiągnięcie zamierzonego efektu bez używania języka JavaScript.

Flexbox model a responsive design

Tak samo, bardzo popularnym pojęciem jest responsive web design czyli tworzenie stron dostosowujących się do rozdzielczości urządzenia użytkownika. Jednym z wielu problemów z jakim spotyka się współczesny webmaster jest ustawienie priorytetu dla elementów strony i treści znajdującej się na stronie. Bardzo częstym przyjętym założeniem dla mobilnej wersji layoutu strony jest założenie content first driven layout, czyli treść musi być wyświetlona pierwsza na stronie. W rozwiązywaniu tego problemu może nam pomóc flexbox model, który pozwala na ustalanie priorytetu wyświetlania dla elementów na stronie.

Przykładowa implementacja flexbox model

<body>
  <header>
    <h1>Tytuł strony</h1>
  </header>
  <div id="main">
    <article>
      <h2>Tytuł artykułu</h2>
    </article>
    <nav>Nawigacja</nav>
    <aside>Sidebar</aside>
  </div>
  <footer>Stopka</footer>
</body>

Dla powyższego kodu HTML zastosujemy następujący kod CSS:

#main {
  min-height: 400px;
  margin: 0;
  padding: 0;
  /* wymuszamy użycie modelu flexbox*/
  display: -webkit-flex;
  display: flex;
  /* sposób ułożenia elementów wewnątrz kontenera */
  -webkit-flex-flow: row;
  flex-flow: row;
}
#main > article {
  margin: 4px;
  padding: 5px;
  border: 1px solid #cccc33;
  border-radius: 10px;
  background: #dddd88;
  /* sposób zachowania elementu wewnątrz kontenera */
  -webkit-flex: 3 1 60%;
  flex: 3 1 60%;
  /* kolejnosć elementu w kontenerze */
  -webkit-order: 2;
  order: 2;
}
#main > nav {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 1;
  order: 1;
}
#main > aside {
  margin: 4px;
  padding: 5px;
  border: 1px solid #8888bb;
  border-radius: 7pt;
  background: #ccccff;
  -webkit-flex: 1 6 20%;
  flex: 1 6 20%;
  -webkit-order: 3;
  order: 3;
}
header, 
footer {
  display: block;
  margin: 4px;
  padding: 5px;
  min-height: 100px;
  border: 1px solid #eebb55;
  border-radius: 10px;
  background: #ffeebb;
}
@media all and (max-width: 768px) {
  #main, 
  #page {
    -webkit-flex-flow: column;
    flex-flow: column;
  }
  #main > article, 
  #main > nav, 
  #main > aside {
    -webkit-order: 0;
    order: 0;
  }
  #main > nav, 
  #main > aside, 
  header, 
  footer {
    min-height: 50px;
    max-height: 50px;
  }
}

Nowe własności modelu flexbox wykorzystane w przykładzie

Model flexbox wprowadza kilka nowych, ciekawych własności. W powyższym przykładzie wykorzystałem kilka z nich:

Display: flex: Flex, jest nową wartością jaką możemy wpisać w właściwość display. Tym sposobem dajemy znać przeglądarce, że zamierzamy korzystać z modelu flexbox wewnątrz elementu.
Flex: Tą własnością definiujemy sposób zachowania się elementu jeśli chodzi o jego szerokość.
Pierwsza wartość oznacza proporcję względem wszystkich elementów. Czyli jeśli mamy 3 elementy: pierwszy z nich ma proporcję 1, drugi 2, a trzeci 3 to proporcja 1-go elementu względem całości będzie wynosiła 1/6, drugiego - 1/3, a trzeciego - 1/2.
Druga wartość jest odpowiedzialna za stopień "kompresji" elementu, czyli o ile razy zmniejszyć dany element.
Trzecia wartość, jest to bazowa szerokość elementu, inaczej mówiąc minimalna szerokość elementu.
Order: We własności order definiujemy kolejność elementu w kontenerze.

Dodatkowo, wykorzystano w powyższym kodzie @media query, który uruchamia inne ustawienia dla szerokości mniejszej bądź równej 768 pikseli.
Wtedy layout zmienia się z layoutu z 3-ma kolumnami w layout w którym elementy znajdują się jeden pod drugim.

W layoucie, który uruchamia się dla mniejszych szerokości będzie można zobaczyć, że poprzez wyzerowanie kolejności elementów w kontenerze treść artykułu będzie się znajdowała wyżej na stronie niż nawigacja czy sidebar.

Podsumowanie

Model flexbox udostępnia nowe możliwości webmasterom. Możliwość ustalania kolejności elementu, ustawianie proporcji szerokości elementu względem całości oraz wymuszanie sposobu ułożenia elementów pozwala na jeszcze lepszym tworzeniu przystępnych stron WWW, które w zależności od kontekstu (w tym przypadku, kontekstem jest rozdzielczość ekranu) inaczej są wyświetlane. Niestety, na chwilę obecną wsparcie w przeglądarkach nowego modelu nie jest najlepsze. Lecz w najbliższym czasie się to zmieni. Jednak w przypadku tworzenia stron dostępnych dla starszych przeglądarek ta metoda będzie bezużyteczna i trzeba będzie się posiłkować JavaScriptem.