search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
#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.

Przeglądarka wsparcie
Mozilla Firefox niepełna (stara specyfikacja)
Google Chrome tak (z prefiksami)
Opera tak (bez prefiksów)
Safari nie
Internet Explorer nie

Demo z tego artykułu można zobaczyć tutaj (polecam zobaczyć je w Google Chrome lub w Operze): css3 flexbox model

źródło

  • Comandeer

    Flexbox to potężna kobyła. Tylko, że… no właśnie, nie ma praktycznie żadnego wsparcia a de facto wszystko, co oferuje, da się (przy większym co prawda nakładzie pracy) w jakiś sposób zemulować czy to w samym CSS, czy przy małym dodatku JS. Więc w chwili obecnej nie widzę większego sensu w używaniu flexboxa. Na razie można go traktować raczej jako ciekawostkę

  • Na nasze nieszczęście, obecnie bardzo często ciekawe funkcjonalności są implementowane w jednej, góra dwóch przeglądarkach a reszta zostaje w tyle. To powoduje w pewnym momencie zmianę podejścia do pracy webmastera.

  • look997

    Coś to wsparcie jest nieaktualne. Przecież nawet IE10 ma poprzednią wersję z prefiksami. Fx ma chyba i nową bez i starą z prefiksami.

  • Nie mam dostępu do IE10 na chwilę obecną. A odnośnie FF, to brakuje mu wsparcia układania elementów wg przyjętych założeń.

  • Pingback: [JS] Jak zbudować interfejs koszyka zakupów używając DragsterJS? | Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko()