Is it OK to use both old and new flexbox syntax for wider compatibility?

Question

.flexcontainer {
    display: box;
    display: flex;
}

This seems to work…but is it a good idea? I'm trying to get flexbox to work on older Android (2.x) as well as newer iOS and Android browsers.

Answer 1

I found this helpful CSS-tricks article about this very issue. It seems the best way is along these lines:

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */