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.
What's Included #
Flexbox support is available for a number of Figuration's components:
- Grid Layout
- Button Group
- Button Toolbar
- Card Deck
- Card Group
- Inline Forms
- Input 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.
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.