Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flexbox - rewolucja w świecie pudełek

1,417 views

Published on

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.

Published in: Software

Flexbox - rewolucja w świecie pudełek

  1. 1. F l e x b o x rewolucja w świecie pudełek Marcin Gajda The Software House
  2. 2. Prehistoria Model tabelaryczny
  3. 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. 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. 5. Era pływających pudełek Model blokowy
  6. 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. 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
  8. 8. 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ń
  9. 9. Wstawiamy flexboxa .container{ display: flex; /* display: inline-flex */ } .item{ /* automatycznie: */ /* display: flex-item; */ }
  10. 10. Domyślny wygląd: ● układ horyzontalny ● szerokość dopasowana do treści ● wysokość wyrównana ● elementy dosunięte do lewej
  11. 11. Kierunek układania
  12. 12. Kierunek układania .container{ /* flex-direction: row; */ flex-direction: column; }
  13. 13. Kierunek układania .container{ /* flex-direction: row; */ flex-direction: column; }
  14. 14. Kierunek układania (flex-direction) column column-reverse row row-reverse
  15. 15. Zmiana kolejności
  16. 16. Zmiana kolejności
  17. 17. Zmiana kolejności
  18. 18. Zmiana kolejności
  19. 19. 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 } }
  20. 20. 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 } }
  21. 21. 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)
  22. 22. Kontrolowanie rozmiaru .left { flex-grow: 0 } .middle { flex-grow: 0 } .right { flex-grow: 0 }
  23. 23. 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 }
  24. 24. 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 }
  25. 25. Kontrolowanie rozmiaru .left { flex-grow: 1 } .middle { flex-grow: 1 } .right { flex-grow: 1 }
  26. 26. 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 }
  27. 27. Kontrolowanie rozmiaru .left { flex-basis: 300px; flex-shrink: 2; } .middle { flex-basis: 300px; flex-shrink: 1; } .right { flex-basis: 300px; flex-shrink: 1; }
  28. 28. Kontrolowanie rozmiaru /* flex: [flex-grow] [flex-shrink] [flex-basis]; */ .avatar { flex: 0 0 100px; } .comment { flex: 1 0 400px; }
  29. 29. Kontrolowanie rozmiaru /* flex: [flex-grow] [flex-shrink] [flex-basis]; */ .avatar { flex: 0 0 100px; } .comment { flex: 1 0 400px; }
  30. 30. Zawijanie elementów .container{ /* flex-wrap: nowrap; */ flex-wrap: wrap; /* flex-flow: [flex-direction] [flex-wrap] */ flex-flow: row nowrap; }
  31. 31. Zawijanie elementów (flex-wrap) column column-reverse row row-reverse
  32. 32. Przykład
  33. 33. Przykład .container{ display: flex; flex-flow: row wrap; max-width: 1024px; } .header{ flex-basis: 100%; }
  34. 34. 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; } }
  35. 35. 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)
  36. 36. Wyrównywanie (justify-content) flex-start flex-end center space-around space-between
  37. 37. Wyrównywanie (justify-content) justify-content: space-between
  38. 38. Wyrównywanie (align-content) .container{ display: flex; flex-flow: column wrap; align-content: space-around; }
  39. 39. Wyrównywanie (justify-items) flex-start flex-end center stretch baseline
  40. 40. Wyrównywanie (justify-items) flex-start flex-end center stretch baseline
  41. 41. Wyrównywanie (align-self) .container{ display: flex; align-items: flex-start; } .middle-item{ align-self: flex-end; }
  42. 42. .container{ display: flex; align-items: center; justify-content: center; }
  43. 43. .container{ display: flex; align-items: center; justify-content: center; }
  44. 44. Wsparcie?
  45. 45. 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
  46. 46. Rozwiązania ● gotowy framework dla flexboxa: http://flexboxgrid.com/ ● obejścia dla różnych problemów z flexboxem: https://github.com/philipwalton/flexbugs
  47. 47. Pytania? @elektryk91

×