How do we decide when to use flexbox?
When deciding whether to use flexbox or not we should consider a few things:
- Can the scaling, spacing, alignment, or ordering issue be solved using more basic CSS? If so we should not use flexbox.
- 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.
- 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
Practice flexbox here also flexboxfroggy
edit: Found another website to practice flexbox
Thanks, @odunsi . The second one looks like a really good site good find my friend. The first one is really good too.
thanks a lot! very interesting and helpful !
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
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?
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!
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 .
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
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!
This has been a great FREE resource for me to better understand Flexbox. Enjoy! Flexbox Zombies | Mastery Games
OMG THIS IS THE BEST GAME !!! Thank you for posting this. CodeCademy could implement this with Codey (sp?!)
Thank you so much for the link to this awesome game!
it was an interesting lesson.
Thanks for sharing! @odunsi
the froggy one is so cute, love it and finish it all.
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?