CSS flex-box Visualizer
Body
Display :
Select Value
Flex
Flex Direction :
Select Value
row
row-reverse
column
column-reverse
Justify-Content :
Select Value
flex-start
flex-end
center
space-betweeen
space-around
space-evenly
Flex wrap :
Select Value
wrap
nowrap
wrap-reverser
align-item :
Select Value
start
end
center
baseline
stretch
align-content :
Select Value
center
start
end
space-between
space-around
evenly
baseline
block 1
Order :
Select Value
1
2
3
4
first
last
flex-grow :
Select Value
0
1
flex-Shrink :
Select Value
0
1
align-self :
Select Value
auto
start
end
center
stretch
baseline
block 2
Order :
Select Value
1
2
3
4
first
last
flex-grow :
Select Value
0
1
flex-Shrink :
Select Value
0
1
align-self :
Select Value
auto
start
end
center
stretch
baseline
block 3
Order :
Select Value
1
2
3
4
first
last
flex-grow :
Select Value
0
1
flex-Shrink :
Select Value
0
1
align-self :
Select Value
auto
start
end
center
stretch
baseline
block 4
Order :
Select Value
1
2
3
4
first
last
flex-grow :
Select Value
0
1
flex-Shrink :
Select Value
0
1
align-self :
Select Value
auto
start
end
center
stretch
baseline
RUN
block 1
block 2
block 3
block 4