Flex Playground

Custom Styles:




How To Distribute space? (space of each line in main axis)
(what to do with space within each line in cross axis?)
(how to place the lines within the remaing space on cross axis? multi-line flex containers only
Anwsers

Justify Content - main axis space

{{$ctrl.anwsers.justify[$ctrl.justify]}}

Align Items - space within corss axis

{{$ctrl.anwsers.alignItems[$ctrl.alignItems]}}

Align Content - how to place the lines in cross axis

{{$ctrl.anwsers.alignContent[$ctrl.alignContent]}}

Nav Item {{$index}} X
  • Flex Grow:
  • Flex Shrink:
  • Flex Basis:
  • Height:
  • Width:
  • Overflow:
  • Order:
  • Align-self: