Flexbox Properties - Live Examples
display: flex;
Creates a flex container for flexible layout.
Example :
1
2
3
flex-direction: row;
Items are placed in a row (default direction).
Example :
A
B
C
flex-direction: column;
Items stack vertically in a column.
Example :
A
B
justify-content: space-between;
Distributes items evenly, first and last aligned to edges.
Example :
Left
Center
Right
align-items: center;
Vertically centers items along the cross-axis.
Example :
Small
Medium
Tall
flex-wrap: wrap;
Allows items to wrap onto multiple lines.
Box 1
Example :
Box 2
Box 3
Box 4
Box 5
flex-grow: 1;
Makes items grow to fill available space.
Example :
Grow 1
No Grow
Grow 1
align-self: flex-end;
Overrides align-items for one item.
Example :
Normal
End
Normal