0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

stub out flexbox layout docs

This commit is contained in:
Mark Otto 2015-05-22 23:20:21 -07:00
parent a335e54573
commit bd971c49b0
2 changed files with 46 additions and 0 deletions

View File

@ -40,6 +40,7 @@
- title: Viewports - title: Viewports
- title: Print - title: Print
- title: Test cases - title: Test cases
- title: Flexbox
- title: Components - title: Components
pages: pages:

45
docs/layout/flexbox.md Normal file
View File

@ -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.