How do we decide when to use flexbox?



How do we decide when to use flexbox?


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