Flexbox Solutions

Turn & Talk

Looking at the CSS in both examples above, what is the difference between the two files?

  • In the second project, the .container has a rule of display: flex; applied.

What element(s) is the property display: flex; applied to? Is that a parent or child?

  • display: flex; should be applied to the parent. That makes the parent a flex container and allows us to control the way the children/items behave.

Try It: Justify Content

On the container’s CSS rule, change the code to: justify-content: space-between;. What happens?

  • The items are evenly spaced out, reaching all the way to the left and right sides.

Now try: justify-content: space-around;. What is the difference between around and space-between?

  • space-around also evenly spaces out the items, but also has an equal amount of space outside of the first and last items.

Try It:: Flexbox Froggy

There is no solution resource for this; by working your way through Flexbox Froggy in pre-work you should have a good enough handle on how to use it/assist students as they work through it.

Practice: Flexbox (Direction)

See the Pen Try It: Flexbox Solution by Turing KWK (@turing-kwk) on CodePen.