stub out flexbox layout docs

diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 71fa7f76e07fee7a78f05a4524cb0b5cc0c97aac..2f814ba2bfbb8c92123f8d66d7c672e579bce636 100644 (file)
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -40,6 +40,7 @@
         - title: Viewports
         - title: Print
         - title: Test cases
+    - title: Flexbox
 
 - title: Components
   pages:

diff --git a/docs/layout/flexbox.md b/docs/layout/flexbox.md
new file mode 100644 (file)
index 0000000..e9087c7
--- /dev/null
+++ b/docs/layout/flexbox.md
@@ -0,0 +1,45 @@
+---
+layout: page
+title: Flexbox
+---
+
+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.
+
+## 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, flexbix 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](/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.
+
+Please be extra conscious of your user base when enabling flexbox in your project.