Skip to content

Instantly share code, notes, and snippets.

@BracketBulldog
Created January 10, 2015 21:58
Show Gist options
  • Save BracketBulldog/04d27b66ba693b971277 to your computer and use it in GitHub Desktop.
Save BracketBulldog/04d27b66ba693b971277 to your computer and use it in GitHub Desktop.
How to detect browser support for flexbox and flexwrap
// how to detect flexbox support
// create a test div in the DOM
var div = document.createElement('div');
// make sure the default value is display: block
div.style.display = 'block';
// try some display values invoking flexbox
try {
div.style.display = '-ms-flexbox';
div.style.display = '-webkit-box';
div.style.display = '-webkit-flex';
div.style.display = 'flex';
} catch (e) {}
// get the result
var flexbox = div.style.display;
// check if flexbox support is available
if (flexbox === 'block') {
console.log('does not support flexbox');
} else {
console.log('use flexbox wherever you want!');
}
// optionally: detect flexbox wrap support
var flexwrap = typeof div.style.flexWrap;
if (flexwrap === 'string') {
console.log('flex-wrap property available');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment