Learn Flexbox with Webflow

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.

Level 3

You got this.

Level 4

In addition to distributing items along the main layout direction, you can also align them along the opposite axis (in this case vertical).

So let's move those circles one more time, eh?

Level 5

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

Level 6

You know what to do.

Level 7

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

Level 8

No sweat.

Level 9

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

Level 10

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

Level 11

You know what to do!

Level 12

One more reversed layout for ya!

Level 13

All flex items try to fit on one line—unless you Wrap Children ...

Level 14

Now use the multi-line alignment settings below the Wrap Children setting to center these guys.

Level 15

Keep working with those multi-line alignment settings under Wrap Children!

Level 16

Hint: Use Column layout and Wrap Children!

Level 17

You can override the flex layout of an individual element inside of a flex container by selecting it and applying Flex Child Settings.

Hint: Select the green circle and apply Align in Flex Child Settings!

Level 18

Hint: Reverse layout on the flex container and change alignment on two of the flex children!

Level 19

Sizing presets can be used on the flex children.

Select any green circle and apply a Sizing preset so they Expand. Since they have the same class applied they will expand and fill the empty space equally.

Level 20

It's the same idea as the last level but only one circle needs to expand.

Level 21

Sizing presets can also be combined with width or height.

Hint: the green circle should have Width: 200px.

Level 22

The order of the children can be overwritten on the individual elements.

Select the green circle and apply Order: First to push it to the start.

Level 23

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

Level 24

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

Hint: Guess what 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%! 😎

Level 25

No hints this time :(

Level 26

Hint: the Align setting on individual flex children will help you.

Level 27

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

Level 28

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