Welcome to Flexbox Trainer!

Click on a level to generate a new problem.

Inspect the page to see a possible solution

Match the items on the left with the items on the right using the flexbox properties below.

WARNING: Sometimes a number of items in the answer container will not fit properly. When this is the case, simply generate a new problem.

Flexbox Properties Reference

Flex-container properties...

justify-content:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

align-items:

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

align-content:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch

flex-direction:

  • row
  • row-reverse
  • column
  • column-reverse

flex-wrap:

  • nowrap
  • wrap
  • wrap-reverse

Flex-items properties...

align-self:

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

flex-basis: any css width

order: any positive or negative number

flex-shrink: any positive number

flex-grow: any positive number