Options for structuring your pages, including global styles, required scaffolding, grid system, and more.
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.
Flexbox support is available for a number of Figuration's components:
- Grid Layout
- Button Group
- Button Toolbar
- Card Deck
- Card Group
- Grid Lines
- Inline Forms
- Input Group
- List Group
- Media Object
- Flexbox Utilities
If you need a reference for working with flexbox, there is an excellent resource over at CSS Tricks with A Complete Guide to 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.
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.