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