Flexbox: Use or Not to Use?

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

When not to use

  • Don’t use flexbox for page layout. Flexbox layout is dependent upon content, issues can arise as the page loads. A basic grid system using percentages, max-widths, and media queries is a much safer approach for creating responsive page layouts. Optimally you’d use a grid system in conjunction with flexbox to achieve the most responsive website.
  • Don’t add display: flex; to every single container div. Only if flexbox really solves an alignment, scale, or ordering issue that can’t be solved in a simpler way with basic CSS.
  • Don’t use flexbox if you have a lot of traffic from IE8 and IE9. While there are fallbacks (linked above), the experience won’t look the same.

When to use

  • Flexbox is inherently good at dynamically scaling elements. I was very excited the first time I put display: flex; on a parent element and saw the child elements form a nice orderly queue with matching heights.
  • You can vertically align all child elements with the align-items property on the parent container by setting it to flex-start, flex-end, center, baseline, or stretch (the default). Alternatively, you can align individual child elements with the property align-self.
  • You can horizontally align-items by setting the justify-content property to either flex-start, flex-end, center, space-between, or space-around. I like to use it for creating responsive menus that start at desktop sizes.
  • Website hierarchy should naturally fall in the logical left to right and top to bottom order. .flex-image to the first position with the property order:-1. The negative number overrides the inherent source order (1, 2, 3, etc.) and puts .flex-image at the beginning of the parent container. Overall, it’s a relatively simple way to control elements within a container for responsive design.

In conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.