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