mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-12 00:08:59 +01:00
7bf868a709
* descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
---
|
|
layout: docs
|
|
title: Flexbox
|
|
description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
|
|
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](https://github.com/postcss/autoprefixer) via Grunt. Some bugs in IE10-11's Flexbox implementation are worked around via [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes).
|
|
|
|
## 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.
|