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
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.
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?
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!
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.
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!