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.

Browsers can progressively render content as it’s streamed from the server, this is great because it means users can start consuming content before it’s all arrived. However, when combined with flexbox it causes misalignment and horizontal shifting.

It’s difficult to spot too, you’re unlikely to notice it while developing locally, or via a super-fast connection. In those cases, the page loads too quickly to notice. But can be seen in the case of slow connections.

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

Using flexbox on projects won't create a problem until it is used properly.