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.
What's Included
Flexbox support is available for a number of Figuration's components:
- Grid Layout
- Breadcrumb
- Button Group
- Button Toolbar
- Card Deck
- Card Group
- Inline Forms
- Input Group
- Media Object
- Navs
- Navbar
- Pagination
- Progress
- Flexbox Utilities
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.