Margin: auto doesn't work on Android < 4.4

[benfrain]

Another limitation of the early version of the spec: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

Unfortunately, auto margin doesn't seem to work. This is a lovely convenience of modern implementations as it lets you easily offset to one side. For example:

http://codepen.io/benfrain/pen/rVMydO

<div class="wrapper">
item in root
    <span>span</span>
</div>

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.wrapper span {
  margin-left: auto;
}

Instead you can workaround (in a fashion like this). Be aware that this requires Modernizr to provide the fork.

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* position relative only needed for positioning context for workaround */
  position: relative;
}
.wrapper span {
  margin-left: auto;
}

span {
  /* For devices that have legacy implementations (and not current flexbox)*/
}
.no-flexbox.flexboxlegacy span {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}