Introduction and real-life examples about using Flexbox. Presented at the front-end meetup in Skopje on 12.01.2016.

1. Introduction & examples
Flexbox
12 January 2016 – Aleksandra Hristov, Front-end meetup Skopje

2. Netcetera | 2
• Flexbox introduction
• Playground
• Real-life examples

3. Netcetera | 3
Flexbox
Introduction

4. Netcetera | 4
 Flexible box layout
 for unknown and/or dynamic items
 Suitable for
 components
 small-scale layouts
 Structure
 Parent (flex container)
 Children (flex items)
 Two axis (can be switched)
 main
 cross
Flexbox introduction

5. Netcetera | 5
 Rules of proportion – complicated math
 Vertical centering
 Same-height columns
 Shrink-to-fit containers
 Float drop and clearing
 Source order dependence
Traditional CSS layout drawbacks

6. Netcetera | 6
 Rules of proportion – complicated math ✓
 Vertical centering ✓
 Same-height columns ✓
 Shrink-to-fit containers ✓
 Float drop and clearing ✓
 Source order dependence ✓
Traditional CSS layout drawbacks

7. Netcetera | 7
.container {
display: flex;
}
Flexible box layout

8. Netcetera | 8
.container {
display: flex;
flex-direction: row; /* default */
}
 row
 row-reverse
 column
 column-reverse
Flex-direction

9. Netcetera | 9

10. Netcetera | 10

11. Netcetera | 11
.container {
display: flex;
flex-direction: row; /* default */
flex-wrap: nowrap; /* default */
}
OR
flex-direction + flex-wrap = flex-flow: row nowrap;
 nowrap
 wrap
 wrap-reverse
Flex-wrap

12. Netcetera | 12

13. Netcetera | 13
.box1{
flex: 1;
}
.box2{
flex: 1;
}
.box3{
flex: 1;
}
Flex-grow
The ability for a flex item to
grow if necessary and dictates
the amount of available space
an item should take.

14. Netcetera | 14

15. Netcetera | 15
.box1{
flex: 1;
}
.box2{
flex: 2;
}
.box3{
flex: 1;
}
Flex-grow
Box2: Take twice the available
space as other siblings

16. Netcetera | 16

17. Netcetera | 17
.container { width: 800px; }
.box1{
flex-grow: 1;
flex-basis:200px; /* added 66px */ }
.box2{
flex-grow: 1;
flex-basis:200px; /* added 66px */ }
.box3{
flex-grow: 1;
flex-basis:200px; /* added 66px */ }
Flex-basis

18. Netcetera | 18
.container { width: 800px; }
.box1{
flex-grow: 1;
flex-basis:200px; /* added 50px */ }
.box2{
flex-grow: 2;
flex-basis:200px; /* added 100px */ }
.box3{
flex-grow: 1;
flex-basis:200px; /* added 50px */ }
Flex-basis

19. Netcetera | 19
.container { width: 800px; }
.box1{
flex: 1 200px; /* added 50px */ }
.box2{
flex: 2 200px; /* added 100px */ }
.box3{
flex: 1 200px; /* added 50px */ }
Flex-basis

20. Netcetera | 20
.box1{
order: 1;
}
.box2{
order: 2;
}
.box3{
order: 3;
}
Order
Controls the order in which
items appear visually in a flex
container

21. Netcetera | 21
1 32

22. Netcetera | 22
.box1{
order: 3;
}
.box2{
order: 2;
}
.box3{
order: 1;
}
Order
OR
.container{
flex-direction:
row-reverse;
}

23. Netcetera | 23
3 12

24. Netcetera | 24
.box1{
order: 2;
}
.box2{
order: 1;
}
.box3{
order: 3;
}
Order

25. Netcetera | 25
2 31

26. Netcetera | 26
.container{
justify-content: flex-start; /* default */
}
Justify-content
Controls the order in which items appear visually in a
flex container (depending on the main axis, one row)
 flex-start
 flex-end
 center
 space-between
 Space-around

27. Netcetera | 27
flex-start

28. Netcetera | 28
flex-end

29. Netcetera | 29
center

30. Netcetera | 30
space-
between

31. Netcetera | 31
space-
around

32. Netcetera | 32
.container{
align-items: stretch; /* default */
}
Align-items
Controls the order in which items appear visually in a
flex container (depending on the cross axis, one row)
 stretch
 flex-start
 flex-end
 center
 baseline

33. Netcetera | 33
stretch

34. Netcetera | 34
flex-start

35. Netcetera | 35
center

36. Netcetera | 36
baseline baselinebaseline

37. Netcetera | 37
.container{
align-content: stretch; /* default */
}
Align-content
Controls the order in which items appear visually in a
flex container (depending on the cross axis, wrapped)
 flex-start
 flex-end
 center
 Stretch
 Space-between
 Space-around

38. Netcetera | 38
flex-start

39. Netcetera | 39
flex-end

40. Netcetera | 40
center

41. Netcetera | 41
stretch

42. Netcetera | 42
space-between

43. Netcetera | 43
space-around

44. Netcetera | 44
.box2{
align-self: flex-end;
}
Align-self
Controls the order of a single child item (depending
on the cross axis)
 auto
 flex-start
 flex-end
 center
 stretch
 baseline

45. Netcetera | 45
flex-end

46. Netcetera | 461 Supported with –webkit- prefix
Browser support

47. Netcetera | 47
Legacy browser implementations

48. Netcetera | 48
.container{
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
Fallback?

49. Netcetera | 49
Playground

50. Netcetera | 50
http://flexboxfroggy.com/
Playground

51. Netcetera | 51
Real-life
examples

52. Netcetera | 52
 A repeatable component
 The same essentiality
 Different content and size
Real-life examples

53. Netcetera | 53
Just a timetable

54. Netcetera | 54

55. Netcetera | 55

56. Netcetera | 56

57. Netcetera | 57

58. Netcetera | 58
col-xs-1 col-xs-2 col-xs-1 col-xs-8

59. Netcetera | 59
col-xs-1col-xs-2 col-xs-?col-xs-2col-xs-3
col-xs-1col-xs-2 col-xs-3col-xs-2col-xs-3 col-xs-1

60. Netcetera | 60
col-xs-1 col-xs-2 col-xs-1 col-xs-7col-xs-1
col-xs-8col-xs-4

61. Netcetera | 61
30px flex-direction: column;
flex: 4 35px; (1) 29px 29px flex-grow: 20; (5)

62. Netcetera | 62

63. Netcetera | 63
demo

64. Netcetera | 64
THANK YOU!
any other questions?
aleksandra.hristov@netcetera.com
@alexhris
* Some of the graphics for Flexbox are picked up from Andrew Clarke’s workshop “CSS3 for responsive design”, 2015