Tam gdzie standardowy model blokowy nie wystarcza, tam z pomocą przychodzą nam elementy typu flexbox. Przyjrzyjmy się więc możliwościom, jakie daje użycie "elastycznych pudełek" do tworzenia widoków na urządzenia mobilne.

1. F l e x b o x
rewolucja w świecie pudełek
Marcin Gajda
The Software House

2. Prehistoria
Model tabelaryczny

3. Model tabelaryczny
<table>
<tbody>
<tr>
<td colspan="3">Header</td>
</tr>
<tr>
<td style="width: 20%;">Sidebar</td>
<td style="width: 60%;">Content</td>
<td style="width: 20%;">Ad</td>
</tr>
</tbody>
</table>

4. Model tabelaryczny
Zalety:
● nie ma problemów z ustawianiem wysokości
● łatwe wyśrodkowywanie elementów
● zachowują się w przewidywalny sposób
Wady:
● wolne renderowanie dla dużych tabel
● łatwo doprowadzić do bałaganu w kodzie
● szablon na tabelach jest nie semantyczny

5. Era pływających pudełek
Model blokowy

6. Era pływających pudełek
<div>Header</div>
<div style="width: 20%; float: left;">
Menu
</div>
<div style="width: 60%; float: left;">
Content
</div>
<div style="width: 20%; float: left;">
Ad
</div>

7. Model blokowy
Zalety:
● przejrzysty i łatwy w utrzymaniu
● elementy szybko się wyświetlają
● pozwala nadać elementom semantyczne znaczenie
Wady:
● utrudnione wyśrodkowywanie
● gorsza elastyczność elementów
● wymaga znajomości sztuczek

11. Flexbox
● Stworzony z myślą o aplikacjach z zaawansowanym interfejsem (RIA)
● Usprawnia układanie elementów w szablonach aplikacji
● Ułatwia wyrównywanie elementów względem siebie
● Pozwala lepiej wykorzystywać pustą przestrzeń

12. Wstawiamy flexboxa
.container{
display: flex;
/* display: inline-flex */
}
.item{
/* automatycznie: */
/* display: flex-item; */
}

14. Domyślny wygląd:
● układ horyzontalny
● szerokość dopasowana do treści
● wysokość wyrównana
● elementy dosunięte do lewej

15. Kierunek układania

16. Kierunek układania
.container{
/* flex-direction: row; */
flex-direction: column;
}

17. Kierunek układania
.container{
/* flex-direction: row; */
flex-direction: column;
}

18. Kierunek układania (flex-direction)
column column-reverse
row
row-reverse

19. Zmiana kolejności

20. Zmiana kolejności

21. Zmiana kolejności

22. Zmiana kolejności

23. Zmiana kolejności
.menu { order: 1 }
.content { order: 2 }
.ad { order: 3 }
@media (max-width: 768px){
.menu { order: 1 }
.content { order: 3 }
.ad { order: 2 }
}

24. Zmiana kolejności
.menu { order: 1 }
.content { order: 2 }
.ad { order: 3 }
@media (max-width: 768px){
.menu { order: 1 }
.content { order: 3 }
.ad { order: 2 }
}

25. Kontrolowanie rozmiaru
flex-basis podstawowy rozmiar elementu
(auto | 0 | px | em | percent | … )
flex-grow o jaką część element może się rozszerzyć względem
innych elementów korzystając z wolnego miejsca
(liczba całkowita bez jednostki)
flex-shrink o jaką część element może się zmniejszyć względem
innych elementów korzystając z dostępnego miejsca
(liczba całkowita bez jednostki)

26. Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }

27. Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }

28. Kontrolowanie rozmiaru
.left { flex-grow: 0 }
.middle { flex-grow: 0 }
.right { flex-grow: 0 }
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }

29. Kontrolowanie rozmiaru
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }

30. Kontrolowanie rozmiaru
.left { flex-grow: 1 }
.middle { flex-grow: 1 }
.right { flex-grow: 1 }
.left { flex-grow: 1 }
.middle { flex-grow: 2 }
.right { flex-grow: 1 }

31. Kontrolowanie rozmiaru
.left { flex-basis: 300px; flex-shrink: 2; }
.middle { flex-basis: 300px; flex-shrink: 1; }
.right { flex-basis: 300px; flex-shrink: 1; }

32. Kontrolowanie rozmiaru
/* flex: [flex-grow] [flex-shrink] [flex-basis]; */
.avatar { flex: 0 0 100px; }
.comment { flex: 1 0 400px; }

33. Kontrolowanie rozmiaru
/* flex: [flex-grow] [flex-shrink] [flex-basis]; */
.avatar { flex: 0 0 100px; }
.comment { flex: 1 0 400px; }

34. Zawijanie elementów
.container{
/* flex-wrap: nowrap; */
flex-wrap: wrap;
/* flex-flow: [flex-direction] [flex-wrap] */
flex-flow: row nowrap;
}

35. Zawijanie elementów (flex-wrap)
column column-reverse
row
row-reverse

37. Przykład

38. Przykład
.container{
display: flex;
flex-flow: row wrap;
max-width: 1024px;
}
.header{
flex-basis: 100%;
}

39. Przykład
.menu { flex: 0 1 100px; }
.content { flex: 1 1 auto; min-height: 200px; }
.ad { flex: 0 1 100px; }
@media screen and (max-width: 400px) {
.container{
flex-direction: column;
}
}

40. Wyrównywanie
justify-content wypełnienie elementami w osi głównej
align-content wypełnienie rzędami w osi poprzecznej
align-items wyrównanie wszystkich elementów w osi poprzecznej
(przypisywane kontenerowi)
align-self wyrównanie elementu w osi poprzecznej
(przypisywane danemu elementowi)

41. Wyrównywanie (justify-content)
flex-start
flex-end
center
space-around
space-between

42. Wyrównywanie (justify-content)
justify-content: space-between

43. Wyrównywanie (align-content)
.container{
display: flex;
flex-flow: column wrap;
align-content: space-around;
}

44. Wyrównywanie (justify-items)
flex-start
flex-end
center
stretch
baseline

45. Wyrównywanie (justify-items)
flex-start
flex-end
center
stretch
baseline

46. Wyrównywanie (align-self)
.container{
display: flex;
align-items: flex-start;
}
.middle-item{
align-self: flex-end;
}

48. .container{
display: flex;
align-items: center;
justify-content: center;
}

49. .container{
display: flex;
align-items: center;
justify-content: center;
}

50. Wsparcie?

51. Kłody pod nogi...
● część przeglądarek wymaga prefiksów (-ms-, -webkit-)
● brak wsparcia na IE8 i IE9
● istnieją różne wersje specyfikacji flexboxa
● pojedyncze błędy w obsłudze

52. Rozwiązania
● gotowy framework dla flexboxa:
http://flexboxgrid.com/
● obejścia dla różnych problemów z flexboxem:
https://github.com/philipwalton/flexbugs

55. Pytania?
@elektryk91