Useful CSS Fixes Using Flexbox
Up until now,some of the most frustrating CSS layout issues could only be solved through hackingor unnecessarily tediousprocesses. Now thanks to theCSS3 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), andalso 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
Onevery common issue in CSS iswhentwo divs have unequal heights, causing yourlayout tolook 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 cancause various layout issues.
Before, acommon 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 nowFlexboxmakes it much easier. The key CSS here is the “align-items: center;”.
Issue: Mobile content isn’tin the order I want!
A very common issue people have with a mobile responsive siteis that once the site is viewed on a mobile device, things are not in the order you want. In the pastyou could fix this using some kind of Javascript to reposition elements in the DOM as you want them, but now it’sa lot less of a hassle using Flexbox. You can reposition elementsusing the CSS property “order: “.
The lower numbers will show first, andyou 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 theamazing things you can do with Flexbox, it’s recommended that youdo some readingto 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!