Flex Playground

Powered by Sleed

Properties for Parent Elements

justify-content:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • start
  • end
  • left
  • right
width:
width:
width:

align-items:

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
  • start
  • end
  • self-start
  • self-end
width:
width:
width:

flex-direction:

  • row
  • row-reverse
  • column
  • column-reverse
width:
width:
width:

flex-wrap:

  • nowrap
  • wrap
  • wrap-reverse
width:
width:
width:

align-content:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch
  • start
  • end
  • baseline
width:
width:
width:

gap:

  • 15px
  • 35px
  • center
width:
width:
width:

Properties for Flex Elements

order:

bg:

order:
bg:

order:
bg:

order:

flex-grow:

flex-grow:
flex-grow:
flex-grow:

flex-shrink:

width:

flex-shrink:
width:

flex-shrink:
width:

flex-shrink:

flex-basis:

flex-basis:
flex-basis:
flex-basis:

Custom

Element 1
Element 2
Element 3