Flexbox is a powerful web styling tool, one my favorite recent CSS additions. It’s an effective replacement for hacky, float-heavy layouts. Given its wide browser support and mature feature set, I lean on Flexbox for most project work.
However, I’m surprised many developers stay away from Flexbox. They’re worried about browser support, a big learning curve, or otherwise strange behavior. They shouldn’t. Here’s how to get started.
Given Flexbox is relatively new tech, settle on a cross-browser strategy early. Modern support is widespread, but if you’re supporting IE 9 or earlier, you’ll need a backup plan.
There’s two main approaches. You can rely on a feature detection suite like Modernizr, and write legacy styling for legacy browsers. Or you can use a polyfill to add Flexbox to older browsers with JavaScript.
Flexbox is a stable, W3C approved styling technique. But during its development, the spec changed significantly over three syntax revisions. For proper coverage, write syntax for multiple revisions on any Flexbox attribute. Otherwise you risk broken content on semi-relevant browsers like IE10 and legacy iOS Safari.
Handling this manually is annoying and tedious. Instead rely on a post processor like Autoprefixer or a simple Sass mixin library.
It’s easiest to learn Flexbox from the outside in. Besides, setting flex items (immediate child elements) layout is tricky and often unnecessary. Start by experimenting with two attributes on your flex container, justify-content and align-items. CSS Tricks includes useful diagrams to visualize both.
justify-content sets where flex items (child elements) render on the main axis of your flex container. By default, this is the horizontal axis, and items get packed toward the beginning (the left side.) By adjusting this attribute, you can shift content to the end. Alternatively, you can center content or maximize space between individual elements.
align-items delivers similar results, but on the “cross axis” of your container. This is the vertical axis by default. align-items pushes content to the top, bottom, or center. The attribute can also align content on its textual baseline.
By default, flex items take up their natural size and will shrink to fit content on a single axis. To modify this behavior, add flex item-specific attributes: flex-grow, flex-shrink, and flex-basis. flex is shorthand coverage for all three attributes at once.
It’s hard to visualize how different flex settings work. So I’d recommend leaning on two of the most straightforward values:
flex: 1 translates into “grow as large as possible” when it’s the only flex item with this value. This is great for an element to take up all remaining space next to several fixed width elements. For example, you’re placing an input box next to a submit button. If the button has a fixed width but the input box has flex: 1, it will grow to take up remaining space in the flex container.
flex: 0 0 auto is roughly equivalent to saying “this item shouldn’t grow or shrink.” This obviously works well for elements with a predefined, fixed size.
Flexbox delivers big layout changes with minimal syntax. But that power can generate costly mistakes. Broken Flexbox layouts often look dramatically different than what’s intended.
So don’t use Flexbox to reinvent your core layout structure, at least early on. It pays dividends to start smaller. For example, adjust your navigation to Flexbox for vertical or horizontal centering. If it breaks, worst case some nav links fall out of alignment. Or wrap two adjacent fixed position elements with Flexbox. A layout failure keeps the elements together, albeit at a skewed proportion.
All these recommendations have one goal: get comfortable with Flexbox as fast as possible. The sooner you leverage Flexbox in your work, the faster your development productivity will grow.