Flexbox
a CSS layout technique
that make sense
ngParty Motaquillah Maddane @electrik_frog
Slide 2
Slide 2 text
I’m Motaki
@electrik_frog
electrik-frog.com
Slide 3
Slide 3 text
I’m Motaki
Frontend Developer
@
Slide 4
Slide 4 text
I’m Motaki
Open source
Projects
Slide 5
Slide 5 text
I’m Motaki
Open source
Projects
Slide 6
Slide 6 text
Why?
General Concepts
Deep dive into the properties
Slide 7
Slide 7 text
Why?
General Concepts
Deep dive into the properties
Slide 8
Slide 8 text
Why?
General Concepts
Deep dive into the properties
Slide 9
Slide 9 text
WHY?
Slide 10
Slide 10 text
CSS Problems*
(a.k.a why you hate CSS)
*
Slide 11
Slide 11 text
CSS hard!
Slide 12
Slide 12 text
Story Time
Slide 13
Slide 13 text
Me after that
Slide 14
Slide 14 text
I failed because
building layouts
is hard.
Slide 15
Slide 15 text
Some attempts to
fix that
Slide 16
Slide 16 text
Tables
Slide 17
Slide 17 text
Float: not-right-at-all;
Slide 18
Slide 18 text
inline-block
Slide 19
Slide 19 text
If you know what I’m saying!
Slide 20
Slide 20 text
A lot of unresolved
mysteries
Slide 21
Slide 21 text
Sticky footer
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Equal height columns
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Vertical centering
Slide 27
Slide 27 text
Insert Space/sticky footer joke
we
discovered
water on
mars
Slide 28
Slide 28 text
Me trying to center vertically
Slide 29
Slide 29 text
Flexbox
Slide 30
Slide 30 text
General Concepts*
(aka theory time)
*
Slide 31
Slide 31 text
Flex Container
Will contain the Flex Items
Slide 32
Slide 32 text
Flex Item
Building block of a Flex container
Slide 33
Slide 33 text
Main axis
Defines the flow of the items on the container
Slide 34
Slide 34 text
Cross axis
Defines the flow of the items on the container
Slide 35
Slide 35 text
Main axis
Always keep this in mind
Cross axis
Slide 36
Slide 36 text
Flex Properties*
(a.k.a When things get interesting)
*
Slide 37
Slide 37 text
Flex container
Slide 38
Slide 38 text
Display: Flex;
Activates the magic
Container
Slide 39
Slide 39 text
Flex-direction
Defines the main/cross axis of the container
Container
Slide 40
Slide 40 text
Flex-direction
1 2 3
Row
Items flow from left to right
*Default
Container
Main axis
Slide 41
Slide 41 text
Flex-direction
1 2 3
Row
Items flow from left to right
*Default
Container
Main axis
Cross axis
Slide 42
Slide 42 text
Flex-direction
Container
1
2
3
Column
Items flow from top to bottom
Main axis
Slide 43
Slide 43 text
Flex-direction
Container
1
2
3
Column
Items flow from top to bottom
Main axis
Cross axis
Slide 44
Slide 44 text
Flex-wrap
Where the magic happens
Container
Slide 45
Slide 45 text
Container
Flex-wrap
nowrap *Default
Do nothing when there’s no
enough space
Slide 46
Slide 46 text
Container
Flex-wrap
wrap
push when there’s no extra space
Slide 47
Slide 47 text
Container
Justify-content
Controls the alignment of Flex Items on the main axis
Slide 48
Slide 48 text
*Default
1 2 3
Justify-content
Container
Flex-start
Elements are positioned at the start
Main axis
Slide 49
Slide 49 text
1 2 3
Justify-content
Container
Flex-end
Elements are positioned at the end
Main axis
Slide 50
Slide 50 text
1 2 3
Justify-content
Container
center
Elements are centered
Main axis
Slide 51
Slide 51 text
1 2 3
Justify-content
Container
space-between
Space is evenly distributed between
the items
Main axis
Slide 52
Slide 52 text
1 2 3
Justify-content
Container
space-around
Space is evenly distributed
around and between the items
Main axis
Slide 53
Slide 53 text
Container
align-items
Controls the alignment of Flex Items on the cross axis
Slide 54
Slide 54 text
align-items
Container
Flex-start
Elements are positioned
at the start
Cross axis
Slide 55
Slide 55 text
4
align-items
Container
Flex-end
Elements are positioned
at the end
Cross axis
Slide 56
Slide 56 text
align-items
Container
center
Elements are centered
Cross axis
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
*Default
stretch
Elements are stretched
align-items
Container
Cross axis
Slide 59
Slide 59 text
ITEM
Slide 60
Slide 60 text
order
controls the order of flex items
Item
Slide 61
Slide 61 text
Item
order
Item
integer
-1 1 2
the item with the lowest order will go first
1
Slide 62
Slide 62 text
Flex: ;
Where the magic happens
Item
Slide 63
Slide 63 text
Flex: <flex-grow> <flex-shrink> <flex-basis>;
shorthand for 3 other properties
Item
Slide 64
Slide 64 text
The base size of the flex item before space distribution
Item
flex-basis
Slide 65
Slide 65 text
Item
flex-basis
Item
css length unit
the base length of the flex item equals the specified length
270px 3em 30%
Slide 66
Slide 66 text
Item
flex-basis
Item
auto
the base length of the flex item equals its content
content
Slide 67
Slide 67 text
Defines the ability of an item to grow when
space is available
Item
flex-grow
Slide 68
Slide 68 text
Item
flex-grow
Item
flex-grow: x;
* Positive number
*
Defines the ability of an item to grow when
space is available
100px
20px 20px
0 0
Free space
Slide 69
Slide 69 text
Item
flex-grow
Item
flex-grow: x;
* Positive number
*
Defines the ability of an item to grow when
space is available
100px
20px Free space
1
20px
0
Slide 70
Slide 70 text
Item
flex-grow
Item
flex-grow: x;
* Positive number
*
Defines the ability of an item to grow when
space is available
100px
20px 20px
0 1
Slide 71
Slide 71 text
Item
flex-grow
Item
flex-grow: x;
* Positive number
*
Defines the ability of an item to grow when
space is available
100px
20px 20px
1
1
Slide 72
Slide 72 text
Item
flex-grow
Item
flex-grow: x;
* Positive number
*
Defines the ability of an item to grow when
space is available
100px
20px 20px
1 1
Slide 73
Slide 73 text
Defines the ability of an item to shrink when
there’s no available space
Item
flex-shrink
Slide 74
Slide 74 text
Item
flex-grow
Item
* Positive number
*
40px 40px flex-shrink: x;
Defines the ability of an item to shrink when
there’s no available space
Slide 75
Slide 75 text
Item
flex-grow
Item
* Positive number
*
60px
40px 40px flex-shrink: x;
Defines the ability of an item to shrink when
there’s no available space
Slide 76
Slide 76 text
Item
flex-grow
Item
* Positive number
*
60px
40px 40px flex-shrink: x;
0
0
Defines the ability of an item to shrink when
there’s no available space
Slide 77
Slide 77 text
Item
flex-grow
Item
* Positive number
*
60px
40px 40px flex-shrink: x;
0
0
Defines the ability of an item to shrink when
there’s no available space
Needed space (20px)
Slide 78
Slide 78 text
Item
flex-grow
Item
* Positive number
*
60px
40px 40px flex-shrink: x;
1
0
Defines the ability of an item to shrink when
there’s no available space
Needed space (20px)
Slide 79
Slide 79 text
Item
flex-grow
Item
* Positive number
*
60px
20px 40px flex-shrink: x;
1
0
Defines the ability of an item to shrink when
there’s no available space
Needed space (20px)
Slide 80
Slide 80 text
Item
flex-grow
Item
* Positive number
*
60px
20px 40px flex-shrink: x;
1
1
Defines the ability of an item to shrink when
there’s no available space
Needed space (20px)
Slide 81
Slide 81 text
Item
flex-grow
Item
* Positive number
*
60px
30px 30px flex-shrink: x;
1
1
Defines the ability of an item to shrink when
there’s no available space
Needed space (20px)
Slide 82
Slide 82 text
You right now
Slide 83
Slide 83 text
Hope not!!
Slide 84
Slide 84 text
Show me code*
(a.k.a examples time)
Slide 85
Slide 85 text
Browser Support
Slide 86
Slide 86 text
95.31%
* c a n i u s e . c o m /f l ex b ox
*
Slide 87
Slide 87 text
10+ only Oh yeah Come’on Of course Yes!
Kinda saw this one coming!