CSS Flexbox Playground
Interactively experiment with CSS Flexbox properties and see the results in real-time.
Container Properties
Flex Items
Preview
1
2
3
Generated CSS
CSS Code
Understanding Flexbox
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
Container Properties:
- flex-direction: Sets the direction of the flex items (row, row-reverse, column, column-reverse)
- flex-wrap: Specifies whether items should wrap if necessary
- justify-content: Aligns items along the main axis
- align-items: Aligns items along the cross axis
- align-content: Distributes space between lines when wrapping
- gap: Sets the spacing between flex items
Item Properties:
- order: Controls the order in which the item appears
- flex-grow: Determines how much the item will grow relative to other items
- flex-shrink: Specifies how much the item will shrink relative to others
- flex-basis: Sets the initial main size of the item
- align-self: Overrides the container's align-items property