Skip to main content
v4 Beta now available! Try it out!
Layout

Options for structuring your pages, including global styles, required scaffolding, grid system, and more.

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.

Be aware that Internet Explorer 10 has a few known quirks and only supports the syntax from the old 2012 version of the spec.