Display Flex Playground

Flexbox Playground

.container { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; gap:20px; }

ITEMS 5

LINES 1

MAIN AXIS Horizontal (X)

1▣

2▣

3▣

4▣

5▣

Direction row row-reverse column column-reverse

Wrap nowrap wrap wrap-reverse

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

Align Items stretch center flex-start flex-end

Gap (px)

20