Flexible box model - display : flex, box, flexbox?
css, flexbox
Solution
You use whichever ones you need for the browsers you need to support.
`display: box`
- Firefox 2.0? (prefixed)
- Chrome 4.0? (prefixed)
- Safari/iOS 3.1? (prefixed)
- Android 2.1 (prefixed)
As far as I can tell, wrapping via `box-lines: multiple` is not implemented in any browser.
`display: flexbox`
- Chrome 17-?? (prefixed)
- Internet Explorer 10 (prefixed)
display: flex - the current standard
- Chrome 21 (prefixed), 29 (unprefixed)
- Opera 12.1 (unprefixed), 15 (webkit prefix)
- Firefox 22 (unprefixed)
- Safari/iOS 7 (prefixed)
- Blackberry 10 (prefixed)
- Internet Explorer 11 (unprefixed)
http://caniuse.com/#feat=flexbox (Note that IE10 is the only browser marked as having partial support that supports wrapping)
The specs for `flexbox` and `flex` are similar enough there's no reason not to include both, especially since IE10 only supports the `flexbox` spec. The spec for `box` is very different and might not be worth including depending on the effect you're after, even though nearly all properties have an analog to the ones found in the `flexbox`/`flex` specs.
You may find that there are some browsers that support multiple specs. There will likely come a time where they will drop support for the older spec, so always make sure you include the `flex` properties.
Problem
Many of us are aware today that the older values of the `display` property like `inline` and `block` are outdated after the new flexible box model has been introduced in CSS3. But, we might find different information on the web in the same flexible box model. We might find mainly 3 different values of the `display` property namely `flex`, `box` and `flexbox`. What is the difference between these three flexible box models and which one to use?