Flexbox in Webflow

The Flexbox Game

Master the fundamentals of CSS flexbox through 28 progressively tougher, interactive levels. No coding required!

What’s flexbox?

Flexbox, also known as flex or flexible box layout, is a display setting that lets you align elements in a box. Flexbox offers layout control in 1 dimension — either vertically or horizontally. If you want to learn how to design real flexbox-powered layouts, check out Webflow's all-new 100% visual flexbox builder.

Level 1

Move the green circle into the outline using Flex Layout settings.

Instructions

  • 1.
    Select the Playground element (the white box) to access its Style panel.
  • 2.
    Find its Display Setting in the Style panel.
  • 3.
    Use Flex Layout settings to get the circle moved to its outline.
Level 2

Use Flex Layout settings on the Playground element to move circles 1 and 2 to their corresponding outlines.

1
2
1
2
Level 3

You got this.

1
2
3
1
2
3
Level 4

In addition to distributing elements along the default horizontal axis, you can also align them along the vertical axis.

So let's move those circles one more time!

1
2
3
1
2
3
Level 5

Now combine your horizontal and vertical alignment skills to center the green circle.

Level 6

You know what to do.

1
2
3
1
2
3
Level 7

Up until now, the main layout direction was set to horizontal. To switch the layout from horizontal to vertical, apply direction: vertical.

1
2
3
1
2
3
Level 8

No sweat.

1
2
3
1
2
3
Level 9

Notice that the outlines are now reversed. Looks like that Reverse direction might help ...

1
2
3
1
2
3
Level 10

These circles are reversed too! Looks like you'll need to use your new skills again ...

1
2
3
1
2
3
Level 11

You know what to do!

1
2
3
1
2
3
Level 12

One more reversed layout for ya!

1
2
3
1
2
3
Level 13

All flex children try to fit on one line — unless you wrap children ...

Level 14

Now use the multi-line align settings in wrap children to center these guys.

Level 15

Keep working with those multi-line align settings in wrap children!

Level 16

Hint: Use the vertical direction and wrap children!

Level 17

You can override the flex layout of an individual element inside of a flex parent by selecting it and applying Flex child settings.

Hint: Select the green circle and apply an alignment setting in Flex child settings!

1
2
3
4
5
1
2
3
4
5
Level 18

Hint: Reverse direction on the flex parent and change alignment on two of the flex children!

1
2
3
4
5
1
2
3
4
5
Level 19

You can also set sizing settings on the flex children.

Select any green circle and apply sizing so they grow if possible. Since each green circle has the same class applied, they'll expand and fill the empty space equally.

Level 20

Same idea as the last level, but only one circle needs to expand.

1
2
3
1
2
3
Level 21

Flex child sizing settings can also be combined with width or height sizing settings.

Hint: The green circle should have width: 200px.

1
2
1
2
Level 22

The flex children's order can be overwritten on individual elements.

Select the green circle and apply order: first to push it furthest to the left.

1
2
3
1
2
3
Level 23

Try changing the order of the 2nd and 3rd circles.

1
2
3
4
5
1
2
3
4
5
Level 24

Now combine what you've just learned about changing the order of flex children with what you know about wrapping children onto multiple lines.

Hint: What do you need to do if you want a flex child to span across full width of its parent container? Right! Just set its width to 100%! 😎

1
2
3
4
5
1
2
3
4
5
Level 25

No hints this time :( But you got this!

1
2
3
4
1
2
3
4
Level 26

Hint: The Flex child align setting may help.

1
2
3
1
2
3
Level 27

Again, utilize different flex child align settings on some of those staggered flex children.

1
2
3
4
5
1
2
3
4
5
Level 28

Now combine all the things you've learned today to solve this! 💥

1
2
3
4
5
1
2
3
4
5