diff options
| author | Pierre-Denis Vanduynslager <[email protected]> | 2016-12-28 19:57:38 -0500 |
|---|---|---|
| committer | Pierre-Denis Vanduynslager <[email protected]> | 2016-12-28 19:57:38 -0500 |
| commit | 425d156df27fa6c18e979aa000bfe5a346ee3450 (patch) | |
| tree | 4157dfcbdf8334e9d9fb2bb239f4ae78706bbc71 /docs/getting-started/flexbox.md | |
| parent | ab2fc63d08b8c53d6f29bcfd73b7f2d5ceaacacd (diff) | |
| parent | e1e621be046a4541a2fd36e445015ee44de3c67e (diff) | |
| download | bootstrap-425d156df27fa6c18e979aa000bfe5a346ee3450.tar.xz bootstrap-425d156df27fa6c18e979aa000bfe5a346ee3450.zip | |
Merge branch 'twbs/v4-dev' into dropdown-keyboard
Diffstat (limited to 'docs/getting-started/flexbox.md')
| -rw-r--r-- | docs/getting-started/flexbox.md | 51 |
1 files changed, 0 insertions, 51 deletions
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md deleted file mode 100644 index f8ab4e8ae..000000000 --- a/docs/getting-started/flexbox.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: docs -title: Flexbox -group: getting-started ---- - -Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## What's included - -Flexbox support is available for a number of Bootstrap's components: - -- The entire grid system (mixins and predefined classes), which switch from `float`s to `display: flex;`. -- Input groups, which move from `display: table;` to `display: flex;`. -- The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`. - -Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt. - -## 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. - -## How it works - -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. - -1. Open the `_variables.scss` file and find the `$enable-flex` variable. -2. Change it from `false` to `true`. -3. Recompile, and done! - -Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information. - -## Browser support - -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...](http://caniuse.com/#feat=flexbox)), 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...](http://caniuse.com/#feat=flexbox) for details on browser support of flexbox. |
