Flexible box model – display : flex, box, flexbox? [duplicate]

by

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.

More Related Contents:

  1. Bootstrap align navbar items to the right
  2. Aligning grid items across the entire row/column (like flex items can)
  3. What’s the difference between align-content and align-items?
  4. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  5. How can I make Flexbox children 100% height of their parent?
  6. Bootstrap 4 navbar with 2 rows
  7. What’s the difference between display:inline-flex and display:flex?
  8. Scrolling a flexbox with overflowing content
  9. A grid layout with responsive squares
  10. Bootstrap 4 masonry layout utilizing flexbox grid
  11. How to change flexbox wrap?
  12. Create a Masonry grid with flexbox (or other CSS)
  13. css grid of squares with flexbox
  14. CSS flexbox not working in IE10
  15. Height 100% on flexbox column child [duplicate]
  16. Prevent flex item from exceeding parent height and make scroll bar work
  17. text-overflow ellipsis on flex child not working [duplicate]
  18. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  19. How can I change the order of Bootstrap columns?
  20. The difference between flex:1 and flex-grow:1
  21. How do I set distance between flexbox items?
  22. Difference between flex-end and end? [duplicate]
  23. How to control number of items per row using media queries in Flexbox?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. How to exclude the first item in a flexbox wrap?
  26. Row Wrap in flex-box not wrapping in Safari
  27. ml-auto is not pushing navbar links to the right
  28. Horizontal masonry layout with flexbox CSS only [duplicate]
  29. CSS Flexbox: difference between align-items and align-content [duplicate]
  30. First-child full-width in Flexbox

Leave a Comment