CSS Flexbox Playground

Container

Item

Flex Direction

flex-direction row

flex-wrap nowrap

Alignment

justify-content flex-start

align-items stretch

align-content normal

Spacing

gap (px) 8

padding (px) 8

min-height (px) 180

Click an item to select it

Flex Item Properties

flex-grow 0

flex-shrink 1

flex-basis auto

align-self auto

order 0

width (px, 0=auto) 0

height (px, 0=auto) 0

Live Preview

Click item to select · Hover to delete · Drag to reorder

Generated CSS