CSS Flexbox
Interactive flexbox playground. Adjust container and item properties to see how flex layout behaves.
Container
flex-directionrow
justify-contentflex-start
align-itemsstretch
align-contentstretch
flex-wrapnowrap
gap (px)8
container width (%)100
Items
count5
flex-grow0
flex-shrink1
flex-basis (px)80
/* Container */
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}
/* Items */
.item {
flex-basis: 80px;
}
1
2
3
4
5
Main Axis
Cross Axis
flex-direction
Defines the direction of the main axis. Items are placed along this axis.
justify-content
Aligns items along the main axis. Controls spacing between and around items.
align-items
Aligns items along the cross axis for a single line of flex items.
align-content
Aligns multiple lines of flex items along the cross axis (only works when flex-wrap is enabled).