Flexbox Playground - CodeUtility

Preview

1

2

3

4

5

Container Properties

flex-direction

justify-content

align-items

flex-wrap

align-content

gap (px)

Items

Number of Items

CSS Code

Flexbox Quick Reference

Container Properties:

flex-direction: Defines the main axis (row/column)
justify-content: Aligns items along the main axis
align-items: Aligns items along the cross axis
flex-wrap: Controls wrapping of items
align-content: Aligns wrapped lines
gap: Space between items

Tip: Experiment with different combinations to understand how Flexbox works!