Welcome to Containers Playground

Try it out to see how you can use Flexbox Containers on your next website.

In this playground, you will go through 10 lessons where you can learn about all the new capabilities available to you with the new feature.

Lesson 01/10

Your Mission: Change the Direction

You can easily change the direction of your items from being stacked in a column to a row, in just a few clicks.

  1. Click the Container with the shapes in it
  2. In the Layout Tab, go to the ‘Items’ Section
  3. Change the direction to Row
Lesson 02/10

Your Mission: Align to Flex End

When the direction is set to Row, you can change the alignment of items in the Container to the top, middle, or bottom of the Container.

  1. Click on the Container,
  2. In the Layout Tab, go to the ‘Items’ section
  3. Align Items to Flex End
Lesson 03/10

Your Mission: Add Equal Spacing Around

You can also easily and equally adjust the distance between your items and the Container’s edges.

  1. Click the Container
  2. In the Layout Tab, go to the ‘Items’ Section
  3. Justify Content to Space Around.
Lesson 05/10

Be a Hero and Try It Out

Change the Hero Container’s direction so that all items are in a row, with the heading, text and button stacked on the left.

Preview Solution

learn to play

Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa .