Flexd

CSS visualizer

Flex container

1

2

3

Style properties

Container

flex-direction:

row row-reverse column column-reverse

justify-content:

flex-start flex-end center space-between space-around space-evenly

align-items:

flex-start flex-end center

gap (px):

20px

Items

1 2 3

align-self:

flex-start flex-end center

flex-grow:

0

Container

Item 1

Item 2

Item 3