Flexbox Playground
Learn flexbox with animated examples!
Content:
flex-direction
flex-wrap
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex-basis
align-self
Swipe Down to Proceed
flex-direction
row
row-reverse
column
column-reverse
1
2
3
flex-wrap
nowrap
wrap
wrap-reverse
1
2
3
4
5
6
7
8
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
1
2
3
align-items
flex-start
flex-end
center
stretch
1
2
3
4
align-content
flex-start
flex-end
center
stretch
space-between
space-around
space-evenly
1
2
3
4
5
6
7
8
order
0
2
6
20
0
1
2
3
4
5
7
10
flex-grow
0
1
3
20
1
2
3
flex-shrink
1
2
0
1
2
3
4
5
6
7
flex-basis
20px
150px
50%
1
2
3
4
align-self
stretch
flex-start
flex-end
center
1
2
3
4