Basic Flex Container
This section demonstrates display: flex with horizontal arrangement:
Flexible
flex: 1Fixed Wide
flex: 0 0 200pxSuper Grow
flex: 5Flex Direction
Control the direction with flex-direction:
Column Direction
flex-direction: column
Item 1
Item 2
Item 3
Row Direction (default)
flex-direction: row
Item A
Item B
Item C
Alignment & Distribution
Master content positioning with flexbox alignment properties:
Justify Content (Main Axis)
Item 1
Item 2
Item 3
Item 4
Start
Between
Space
End
Around
Equal
Space
Even
Spacing
All
Around
