v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Flexbox

Flexbox is now a full-time part of Figuration. Many components, but not all, are flexbox enabled. Flexbox allows for greater layout flexibility, making sizing and alignment of elements much easier.

Page Contents

What's Included #

Flexbox support is available for a number of Figuration's components:

Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt. Some bugs in IE10-11's Flexbox implementation are worked around via postcss-flexbugs-fixes.

If you need a reference for working with flexbox, there is an excellent resource over at CSS Tricks with A Complete Guide to Flexbox.

Why Flexbox? #

In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

  • Easy vertical alignment of content within a parent element.
  • Easy reordering of content across devices and screen resolutions with the help of media queries.
  • Easy CSS-only equal height columns for your grid-based layouts.

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

Browser Support #

Using flexbox means reduced browser and device support, but mostly for older technology.

Visit Can I use... for details on browser support of flexbox.

There are also a number of browser bugs and cross-browser issues with flexbox. Some of which do not have possible workarounds, while there are other that do. Check out the Flexbugs repository for additional information.