How do we decide when to use flexbox?

Question

How do we decide when to use flexbox?

Answer

When deciding whether to use flexbox or not we should consider a few things:

  1. Can the scaling, spacing, alignment, or ordering issue be solved using more basic CSS? If so we should not use flexbox.
  2. Do we want to use flexbox to create an entire page layout? If yes, consider using other CSS tools, like CSS Grid, in conjunction with flexbox - as flexbox is not designed to create entire page layouts.
  3. Do we need an easy way to align, control spacing, scale, and/or order items in a vertical or horizontal direction within a container? Use flexbox!

Some common use cases for flexbox:

  • page navigation, including spacing items and stretching/shrinking items as desired
  • centering items easily
  • easily flipping content or switching the order of content
10 Likes

Practice flexbox here also flexboxfroggy

edit: Found another website to practice flexbox

83 Likes

Thanks, @odunsi . The second one looks like a really good site good find my friend. The first one is really good too.

3 Likes

thanks a lot! very interesting and helpful !

1 Like

Not very easy to remember all at a ago but its worth knowing flexbox.
I definitely appreciate your number 3 explanation @aubsrey as that’s the whole purpose for the exercise.

Great! thanks for sharing buddy :slightly_smiling_face:

1 Like

Can someone please explain what justify-content: space-between; did on step 6 of this review lesson? I know that it would position the flex items with equal space between them on their main axis (which in this case is the vertical axis) but I didn’t actually see a change, why?

1 Like

Hey there,
I can see that all three columns are now aligned on their respective “container” top and bottom using justify-content: space-between; and is most visible on the middle column. You might want to try other values to better see it. For me, I used space-evenly and saw right away how it was affected. Happy coding!

3 Likes

The justify-content: space-between; will affect the space between col classes not the images because col classes here are the flex items of cards class and they are the flex containers of the images.

Happy Coding :grinning:.

2 Likes

I think flexbox is something we use sometimes not always because most of the time normal CSS is easier and can deal with alignment, display…

Flexbox is commonly used to make layouts of elements easier. If you want to layout a whole page, however, you are better off using CSS grid. Without these two tools, it can be harder to layout your elements correctly, and your code might be less concise

2 Likes

Dear friends, are there any courses, here in codecadamy, teaching CSS grid, instead of Bootstrap? Unfortunately I am unable to find.
Would appreciate your help!
Thanks in advance! :slight_smile:

This has been a great FREE resource for me to better understand Flexbox. Enjoy! Flexbox Zombies | Mastery Games

5 Likes

OMG THIS IS THE BEST GAME !!! Thank you for posting this. CodeCademy could implement this with Codey (sp?!)

3 Likes

Thank you so much for the link to this awesome game!

Learn Intermediate CSS | Codecademy

it was an interesting lesson.

Thanks for sharing! @odunsi

the froggy one is so cute, love it and finish it all. :heart_eyes:

1 Like

Thank you so much! really good tools

hi would i need to use flexbox if i wanted to create my modeling site with my images lined up in rows /columns?