CSS FlexBox Visualisation - SideQuest

Flexbox Visualisation

Visualisation for understanding CSS Flexbox

Count

1515

Gap

0

0.25

0.5

0.75

Width

Auto

Fixed

Full

Wrap

nowrap

wrap

wrap-reverse

Flex Direction

row

row-reverse

column

column-reverse

Justify Content

flex-start

center

flex-end

space-between

space-around

space-evenly

Align Items

start

center

end

Generate Code

Preview

1

2

3

4

5

Made with