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.

1. CSS GRID & FLEXBOX
Łatwość tworzenia
responsywnych stron internetowych
Tomasz Kajtoch

2. O MNIE
Frontend Developer
w The Software House
Najpopularniejsze imię w firmie, Wow!
Mój koteł

3. O CZYM BĘDĘ MÓWIĆ?

4. DLACZEGO
TO TAKIE ISTOTNE?

5. BUDOWA STRON
INTERNETOWYCH W 2017
Floaty
i clear: both
display: inline-block
Frameworki i gridyTabelki

6. 2017 JEST PRZEŁOMOWYM
ROKIEM DLA CSS

7. #1
FLEXBOX LAYOUT

8. FLEXBOX
JEST JEDNOWYMIAROWY
POZIOMO PIONOWO

9. ZALETY
- Wygodne użycie w 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ć
tych wszystkich nowych właściwości :(("
Jego implementacja w niektórych
przeglądarkach jest niewydajna.
I'm looking at you, Internet Explorer

11. WSPARCIE PRZEGLĄDAREK
Edge
12+
07.2015
Firefox
28+
03.2014
Chrome
21+
06.2012
Safari
6.1+
10.2013
Opera
12.1+
11.2012
Android Browser
4.4+
12.2013

12. Internet Explorer
11+
10.2013
"Partial support in IE refers to supporting
an older version of the specification."

13. PODZIAŁ NA KONTENERY
I ELEMENTY

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 2 3
4 5
Zezwól na złamanie ułożenia elementów,
gdy jest to konieczne

17. WYRÓWNANIE ELEMENTÓW
WEWNĄTRZ KONTENERA

18. justify-content: flex-start
1 2 3
WZDŁÓŻ GŁÓWNEJ OSI

19. justify-content: flex-end
1 2 3
WZDŁÓŻ GŁÓWNEJ OSI

20. justify-content: center
1 2 3
WZDŁÓŻ GŁÓWNEJ OSI

21. justify-content: space-between
1 2 3
WZDŁÓŻ GŁÓWNEJ OSI

22. justify-content: space-around
1 2 3
WZDŁÓŻ GŁÓWNEJ OSI

23. WZDŁÓŻ OSI POPRZECZNEJ
align-content: flex-start

24. WZDŁÓŻ OSI POPRZECZNEJ
align-content: flex-end

25. WZDŁÓŻ OSI POPRZECZNEJ
align-content: center

26. WZDŁÓŻ OSI POPRZECZNEJ
align-content: stretch

27. WZDŁÓŻ OSI POPRZECZNEJ
align-content: space-between

28. WZDŁÓŻ OSI POPRZECZNEJ
align-content: space-around

29. align-items: flex-start
1
2
3
UŁOŻENIE WZDŁÓŻ
OSI POPRZECZNEJ

30. align-items: flex-end
1
2
3
UŁOŻENIE WZDŁÓŻ
OSI POPRZECZNEJ

31. align-items: center
1 2 3
UŁOŻENIE WZDŁÓŻ
OSI POPRZECZNEJ

32. align-items: stretch
1 2 3
UŁOŻENIE WZDŁÓŻ
OSI POPRZECZNEJ

33. KOLEJNOŚĆ ELEMENTÓW
WEWNĄTRZ KONTENERA
order: <number>

34. <div class="items">
<div class="first"></div>
<div class="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
ELEMENTU W KONTENERZE
align-self: <flex-start|flex-end|center|
baseline|stretch>

37. align-items: flex-start;
align-self: center;
(nie ustawiony)
align-self: center
align-self: flex-end

38. DEMO

39. #2
CSS GRID LAYOUT

40. WSPARCIE PRZEGLĄDAREK
Edge
16+
it works...
Firefox
52+
03.2017
Chrome
57+
03.2017
Safari
10.1+
03.2017
Opera
44+
03.2017
Android Browser
56+
02.2017

41. Internet Explorer
11+
10.2013
"Partial support in IE refers to supporting
an older version of the specification."

42. CSS GRID JEST
DWUWYMIAROWY

43. NAZEWNICTWO ELEMENTÓW
W CSS GRID

44. 1. CONTAINER

45. 1. GRID LINE
21

46. 1. GRID TRACK
1
2
3

47. 1. GRID CELL

48. 1. GRID AREA
1 2 3 4
2

49. KONTENER CSS GRID
display: <grid|inline-grid|subgrid>

50. GRID-TEMPLATE
grid-template-rows
grid-template-columns

51. GRID-TEMPLATE
grid-template-rows: 1fr 1fr
grid-template-columns: 1fr 1fr 1fr 1fr

52. GRID-TEMPLATE
grid-template-rows: repeat(2, 1fr)
grid-template-columns: repeat(4, 1fr)

53. PROBLEM:
NUMERY SĄ
NIECZYTELNE

54. ROZWIĄZANIE:
ASCII-ART!!1
heder heder heder
kontent kontent sajdbar
stopka stopka stopka

55. SERIO.

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
Sidebar Content Content
Sidebar Footer Footer

58. Header
Sidebar
Content
Footer

59. DEMO

60. GRID-GAP
grid-row-gap: <number>
grid-column-gap: <number>

61. JUSTIFY-ITEMS
justify-items: <start|end|center|stretch>

62. justify-items: start
JUSTIFY-ITEMS

63. justify-items: center
JUSTIFY-ITEMS

64. GRID-COLUMN
GRID-ROW
grid-column: <number>
grid-row: <number>

65. DEMO

66. ZAGRAJ
I NAUCZ SIĘ CSS GRID
cssgridgarden.com

67. PYTANIA?

68. DZIĘKUJĘ!