Download as PDF, PPTX
Uploaded byThe Software House
CSS Grid Layout & Flexbox. Łatwość tworzenia responsywnych stron internetowych
Tomasz Kajtoch: CSS Grid i Flexbox to przełomowe podejście do szybkiego tworzenia nowoczesnych, w pełni responsywnych układów stron internetowych. Mimo tego, że te dwa systemy są całkowicie od siebie niezależne, ich wspólne użycie otwiera developerom zupełnie nowe możliwości, a przy okazji zmniejsza ilość kodu potrzebnego do osiągnięcia pożądanego efektu. Na mojej prelekcji przestawię praktyczne zalety wykorzystania obu systemów i porównam je z dotychczas stosowanymi metodami.
More Related Content
Similar to CSS Grid Layout & Flexbox. Łatwość tworzenia responsywnych stron internetowych
CSS Grid Layout & Flexbox. Łatwość tworzenia responsywnych stron internetowych
- 1. CSS GRID &FLEXBOX Łatwość tworzenia responsywnych stron internetowych Tomasz Kajtoch
- 2. O MNIE Frontend Developer wThe Software House Najpopularniejsze imię w firmie, Wow! Mój koteł
- 3. O CZYM BĘDĘMÓWIĆ?
- 4.
- 5. BUDOWA STRON INTERNETOWYCH W2017 Floaty i clear: both display: inline-block Frameworki i gridyTabelki
- 6. 2017 JEST PRZEŁOMOWYM ROKIEMDLA CSS
- 7.
- 8.
- 9. ZALETY - Wygodne użyciew responsywnych widokach - Pozwala zmieniać kolejność elementów bez wpływu na DOM - Zmniejsza ilość kodu potrzebnego do osiągnięcia pożądanego układu
- 10. WADY "O nie! Muszę się nauczyć tychwszystkich nowych właściwości :((" Jego implementacja w niektórych przeglądarkach jest niewydajna. I'm looking at you, Internet Explorer
- 11.
- 12. Internet Explorer 11+ 10.2013 "Partial supportin IE refers to supporting an older version of the specification."
- 13. PODZIAŁ NA KONTENERY IELEMENTY
- 14. KONTENER FLEXBOX display: flex display:inline-flex To ja przechowuję wszystkie elementy
- 15. FLEX-DIRECTION flex-directon: row 1 2 flex-directon:row-reverse 2 flex-directon: column 1 2 flex-directon: column-reverse 112 Kierunek układania elementów wewnątrz kontenera. A.k.a. R.I.P. floats
- 16. FLEX-WRAP flex-wrap: wrap 1 23 4 5 Zezwól na złamanie ułożenia elementów, gdy jest to konieczne
- 17.
- 18. justify-content: flex-start 1 23 WZDŁÓŻ GŁÓWNEJ OSI
- 19. justify-content: flex-end 1 23 WZDŁÓŻ GŁÓWNEJ OSI
- 20. justify-content: center 1 23 WZDŁÓŻ GŁÓWNEJ OSI
- 21. justify-content: space-between 1 23 WZDŁÓŻ GŁÓWNEJ OSI
- 22. justify-content: space-around 1 23 WZDŁÓŻ GŁÓWNEJ OSI
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. align-items: center 1 23 UŁOŻENIE WZDŁÓŻ OSI POPRZECZNEJ
- 32. align-items: stretch 1 23 UŁOŻENIE WZDŁÓŻ OSI POPRZECZNEJ
- 33.
- 34. <div class="items"> <div class="first"></div> <divclass="second"></div> <div class="third"></div> </div> .first .second .third
- 35. .items { display:flex; } .first { order: 2; } .second { order: 1; } .third { order: 3; } .first.second .third
- 36. NADPISANIE DOMYŚLNEGO UŁOŻENIA POJEDYNCZEGO ELEMENTUW KONTENERZE align-self: <flex-start|flex-end|center| baseline|stretch>
- 37. align-items: flex-start; align-self: center; (nieustawiony) align-self: center align-self: flex-end
- 38.
- 39.
- 40.
- 41. Internet Explorer 11+ 10.2013 "Partial supportin IE refers to supporting an older version of the specification."
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. 1. GRID AREA 12 3 4 2
- 49. KONTENER CSS GRID display:<grid|inline-grid|subgrid>
- 50.
- 51.
- 52.
- 53.
- 54. ROZWIĄZANIE: ASCII-ART!!1 heder heder heder kontentkontent sajdbar stopka stopka stopka
- 55.
- 56. GRID-TEMPLATE-AREAS grid-template-columns: repeat(3, 1fr); grid-template-areas:"header header header" "sidebar content content" "sidebar footer footer";
- 57. Header Header Header SidebarContent Content Sidebar Footer Footer
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. ZAGRAJ I NAUCZ SIĘCSS GRID cssgridgarden.com
- 67.
- 68.