How to detect browser support for flexbox and flexwrap

detect-flexbox-and-flexwrap-support

// 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');
}