Up until now, some of the most frustrating CSS layout issues could only be solved through hacking or unnecessarily tedious processes. Now thanks to the CSS3 Flexible Box layout mode, or "Flexbox", those common layout issues can be solved with ease!
But before you try it for yourself, remember that Flexbox isn't supported on a few browsers (most notably IE9 and earlier), and also many browsers require vendor prefixes in order for Flexbox to work.
With that in mind, let's take a look:
Issue: Getting two divs to have equal heights
One very common issue in CSS is when two divs have unequal heights, causing your layout to look awkward. In the example image below you can see that “Column 2” does not extend to the bottom of the page. Along with looking odd, it can cause various layout issues.
Before, a common fix was to use a background image in the containing div to make it appear as if the column extended to the bottom of the page. But using background images to fix this in responsive layouts can get extremely messy. So instead let’s use Flexbox.
Issue: Vertically align content
There were many ways to center content vertically before, but now Flexbox makes it much easier. The key CSS here is the “align-items: center;”.
Issue: Mobile content isn't in the order I want!
A very common issue people have with a mobile responsive site is that once the site is viewed on a mobile device, things are not in the order you want. In the past you could fix this using some kind of Javascript to reposition elements in the DOM as you want them, but now it's a lot less of a hassle using Flexbox. You can reposition elements using the CSS property "order: ".
The lower numbers will show first, and you can use a combination of CSS Media Queries and Flexbox to change the mobile layout!
More Reading/Examples
While these are just a few examples of the amazing things you can do with Flexbox, it's recommended that you do some reading to get a better understanding of how it works and what you can do with it. Here are a few resources to get you going:
Let us help you with your website today!
