Flexbox in Webflow

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.

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

You got this.

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!

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

You know what to do.

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

No sweat.

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

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

You know what to do!

One more reversed layout for ya!

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

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

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

Hint: Use the vertical direction and wrap children!

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!

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

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.

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

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

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

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.

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

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%! 😎

No hints this time :( But you got this!

Hint: The Flex child align setting may help.

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

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