Flexbox Properties Demo
Interactive demonstration of CSS Flexbox properties
justify-content
Controls horizontal alignment of items
flex-start
flex-end
center
space-between
space-around
space-evenly
1
2
3
justify-content: flex-start;
align-items
Controls vertical alignment of items
flex-start
flex-end
center
stretch
baseline
Item 1
Taller Item
Item 3
align-items: flex-start;
flex-direction
Controls the direction of flex items
row
column
row-reverse
column-reverse
First
Second
Third
flex-direction: row;
flex-grow
Controls how items grow to fill available space
Default (0)
Equal Growth (1)
Different Growth
Item 1
Item 2
Item 3
flex-grow: 0; (default)