Download as PDF, PPTX
Exploring Flexbox with Chris Sauvé
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. YES YES -‐webkit YES10+ only -‐ms in IE10 YES even in Mini!
- 15. YES YES -‐webkit YES10+ only -‐ms in IE10 YES even in Mini! CAN I USE SAYS… 92.12%
- 16.
- 17. display: flex; // or inline-‐flex flex-‐direction: row; // or column
- 18.
- 19.
- 20. display: flex; // or inline-‐flex flex-‐direction: row; // or column
- 21. display: flex; // or inline-‐flex flex-‐direction: row; // or column align-‐items: stretch;
- 22. 1 2 3 CrossAxis align-‐items
- 23. 1 2 3 align-‐items: stretch; // default
- 24. 1 2 3 align-‐items: center;
- 25. 1 2 3 align-‐items: flex-‐start;
- 26. 1 2 3 align-‐items: flex-‐end;
- 27. display: flex; // or inline-‐flex flex-‐direction: row; // or column align-‐items: stretch;
- 28. display: flex; // or inline-‐flex flex-‐direction: row; // or column align-‐items: stretch; justify-‐content: center;
- 29. 1 2 3 MainAxis justify-‐content
- 30. 1 2 3 justify-‐content: center;
- 31. 1 2 3 justify-‐content: flex-‐start;
- 32. 1 2 3 justify-‐content: flex-‐end;
- 33. 1 2 3 justify-‐content: space-‐between;
- 34. 1 2 3 justify-‐content: space-‐around;
- 35. display: flex; // or inline-‐flex flex-‐direction: row; // or column align-‐items: stretch; justify-‐content: center;
- 36. display: flex; // or inline-‐flex flex-‐direction: row; // or column align-‐items: stretch; justify-‐content: center; flex-‐wrap: nowrap;
- 37. 1 2 3 flex-‐wrap: nowrap;
- 38.
- 39.
- 40.
- 41.
- 42. 1 2 3 100px 20px20px 20px
- 43. 1 2 3 100px 20px20px 20px 40px of “growth” available
- 44. 1 2 3 flex-‐grow: 0; flex-‐grow: 0; flex-‐grow: 0;
- 45. 1 2 3 flex-‐grow: 1; 13px of growth flex-‐grow: 1; 13px of growth flex-‐grow: 1; 13px of growth
- 46. 1 2 3 flex-‐grow: 1; 10px of growth flex-‐grow: 2; 20px of growth flex-‐grow: 1; 10px of growth
- 47. 1 2 3 flex-‐grow: 0; 0px of growth flex-‐grow: 1; 20px of growth flex-‐grow: 1; 20px of growth
- 48. 1 2 3 40px 20px20px 20px
- 49. 1 2 3 40px 20px20px 20px 20px of “shrink” available
- 50. flex-‐shrink: 0; flex-‐shrink: 0; flex-‐shrink: 0; 1 2 3
- 51. flex-‐shrink: 0; flex-‐shrink: 1; flex-‐shrink: 1; 1 0px of shrink 10px of shrink 10px of shrink
- 52.
- 53.
- 54.
- 55. .next-‐grid { display: flex; } .next-‐grid__cell { flex-‐grow: 1; flex-‐shrink: 1; flex-‐basis: 0; } .next-‐grid__cell .next-‐grid__cell .next-‐grid
- 56.
- 58. Scale proportionately Don’t scale Onlyfill space when there’s overflow
- 59. .next-‐tab { flex-‐grow: 1; flex-‐shrink: 1; flex-‐basis: auto; }.next-‐tab__list-‐-‐has-‐overflow { display: flex; align-‐items: stretch; } .next-‐tab__list-‐-‐has-‐overflow .next-‐tab .next-‐tab .next-‐tab .next-‐tab .next-‐tab-‐-‐disclosure .next-‐tab-‐-‐disclosure { flex-‐grow: 0; flex-‐shrink: 0; flex-‐basis: auto; }
- 60.
- 62. Max Height Scrollable, fill availablespace As small as possible, always visible
- 63. .next-‐popover__pane { flex-‐grow: 0; flex-‐shrink: 1; flex-‐basis: auto; overflow: scroll; } .next-‐popover__content { display: flex; flex-‐direction: column; align-‐items: stretch; } .next-‐popover__content .next-‐popover__pane
- 64. .next-‐popover__pane-‐-‐fixed { flex-‐grow: 0; flex-‐shrink: 0; flex-‐basis: auto; overflow: hidden; } .next-‐popover__content .next-‐popover__pane .next-‐popover__pane-‐-‐fixed
- 65.
- 66.
- 67.
- 68.