Flexbox all the time (Drop IE9 support and remove $enable-flex option) (!21389) · Merge requests · Bootstrap / bootstrap

Merged Mark Otto requested to merge flex into v4-dev Dec 21, 2016

With this PR, flexbox becomes the default layout option for Bootstrap 4. Our grid system and several components are now built with flexbox to start instead of having opt-in behavior via $enable-flex. That Sass variable has been removed, Sass files cleaned up, docs consolidated, and migration and browser support notes updated. Beyond the flexbox changes, there are no additional changes to the compiled CSS at this time.

Here's specifically what's changed:

Removed the $enable-flex variable. Flexbox is now enabled by default and cannot be disabled via Sass variable.
Removed the non-flexbox variants for our grid system, cards, media objects, list groups, and navigation components.
- For the grid, there should be no breaking changes to your code. You can, however, take advantage of the flexbox auto layout and alignment options though!
- For cards, this means you can now drop .card-deck-wrapper from your markup.
- For media objects, this means you can be more flexible with the order of your markup (e.g., .media-left and .media-right don't need to come first in the DOM.)
- For list groups, this simplifies the alignment of badges. No more required utilities just to vertically and horizontally align badges in list group items. (You might still need some for fine-tuning, though).
Consolidated grid docs to a single grid.md file (no more flexbox-grid.md.) This still needs some finessing as the docs don't flow as seamlessly as I'd like. For now, at least all the flexbox alignment and sizing docs have been ported over to the main grid docs.
Updated migration and browser support docs to clarify IE10+ support.
Removed the compiled flexbox CSS bundles. The Gruntfile has had it's Sass tasks updated and the dist files have been removed from Git.
Removed flexbox.md docs from the Getting started section.

Because of these changes, here's what's been modified in the compiled CSS:

Clearfix has been removed from rows as it's no longer necessary with no floats being present.
Columns use max-width instead of width. While this was the case for the flexbox grid before this change, it's different from the default grid's use of width.

It's also worth noting that some components are still not built with flexbox; this PR doesn't address that. We'll tackle that later across the following components:

Carousel
Navbar
Button groups
Cards