Skip to main content
Figuration v3 Preview Available!
Layout

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

Flexbox

Flexbox support is coming to Figuration. The goal is to have both an opt-in system via classes, as well as a full option that forces the use of flexbox on supported components.

Contents

What’s Included

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

  • Grid Layout, which switches from floats to display: flex;.
  • Button Group, which switches from floats to display: flex;.
  • Card Deck, which switches from display: table; to display: flex;.
  • Card Group, which switches from display: table; to display: flex;.
  • Grid Lines, which switches from display: table; to display: flex;.
  • Input Group, which switches from display: table; to display: flex;.
  • List Group, which switches from blocks to display: flex;.
  • Media Object, which switches from display: table; to display: flex;.
  • Navs, which switches from floats to display: flex;.
  • Navbar Group, which switches from display: table; to display: flex;.
  • Utility classes, for alignment options for flexbox enabled 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.

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.

Opt-in Flexbox Mode

The opt-in mode is compiled into Figuration’s base CSS by default. This can be controlled by changing the $enable-flex-opt Sass variable.

To use the opt-in mode, simply add another class to parent element. An example would be to use the grid layout in flexbox mode, you would add a .row-flex class to the .row element. More information and caveats can be found in the documentation for each component, see the What’s Included section above.

A quick list of the opt-in classes are:

  • .row-flex
  • .btn-group-flex
  • .btn-group-vertical-flex
  • .card-deck-flex
  • .card-group-flex
  • .gridline-flex
  • .input-group-flex
  • .list-group-flex
  • .media-flex
  • .nav-flex
  • .navbar-group-flex

Full Flexbox Mode

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode. Compiling the Sass in full flexbox mode will not generate the opt-in flexbox classes, as they are no longer needed.

  1. Open the _settings.scss file and find the $enable-flex-full variable.
    • You may also copy the setting into the _custom.scss file if you wish to use a custom configuration.
  2. Change it from false to true.
  3. Recompile, and done!

Browser Support

Using/enabling flexbox means reduced browser and device support:

  • Internet Explorer 9 and below do not support flexbox.
  • Internet Explorer 10 has a few known quirks (see the “Known issues” tab in Can I use…), requires using a prefix, and only supports the syntax from the old 2012 version of the spec.

Please be extra conscious of your user base when enabling flexbox in your project. 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.