432Days

432 days since this post was last revised. Specific details are likely out of date.

While troubleshooting layouts across older Android devices I’ve hit a number of niggles. These aren’t bugs, they are merely limitations of the prior version of the Flexbox specification. I’ve documented them here for posterity; in the hope they save someone some hassle in future.

The stock Android browser that shipped with Android 2.1 – 4.3 (caniuse data) used the old version of the Flexible Box Layout Module. You can read that version of the specification here: http://www.w3.org/TR/2009/WD-css3-flexbox–20090723/. Those are the principal devices you are likely to encounter these issues on.

Note: from this point on, for brevity, I’m going to refer to this old stock version of Android as ‘OSA’.

While Autoprefixer makes using Flexbox as simple as any other layout mechanism (by handling all the additional syntax needed to gain visual parity in browser implementations using the older versions of the specification), it’s can’t guess your intentions when the old implementation simply doesn’t have the capability to do what you want to do.

Here are some things I wanted to do but the old specification failed to provide a mechanism for.

Incidentally, can we have a big shout out for Autoprefixer? I’d argue using Flexbox without Autoprefixer would be pretty horrendous at best, and downright impossible at worst. @autoprefixer / #autoprefixerlove

justify-content: space-around

If you have a flex parent and set justify-content: space-around OSA will ignore the declaration entirely. This may result in non-optimal layout as all flex-children will justify to a flex-start alignment. You may find it preferable to use both possible space-* declarations for justify-content. This will get you space-between in OSA and space-around in modern implementations which may be preferable depending upon your goals.

Working example: http://codepen.io/benfrain/pen/yymaOr

See the Pen yymaOr by Ben Frain (@benfrain) on CodePen.

.wrapper {
    display: flex;
    flex: 1 1 60%;
    /* Android 2.3 understands the first declaration and ignores the second */
    justify-content: space-between;
    /* Modern browsers overwrite the first declaration with the second */   
    justify-content: space-around;
}

margin-auto

Another limitation of the early version of the spec: http://www.w3.org/TR/2009/WD-css3-flexbox–20090723/ for OSA is that margin: auto 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

See the Pen rVMydO by Ben Frain (@benfrain) on CodePen.

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

And then the CSS

.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. You should also be aware that by using absolute positioning you are taking that element out of the document flow (which may cause you other issues).

.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%);
}

span elements within flex-direction: column container

Suppose we have an element that is set to be a flex container with the direction set to a column. If we have span elements inside (displayed inline by default), on OSA, they do not honour the column layout.

It’s an easy workaround, you need to explicitly set those span elements to be flex items. Here is an example (you’ll need to view it on an OSA device/emulator to appreciate the difference).

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

See the Pen xGEqmd by Ben Frain (@benfrain) on CodePen.

Just ensure you add the following to your span elements:

.i-am-a-span {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Summary

That’s all for now. I dare say I’ll add to this list as I uncover more oddities/limitations.
I tend to add these as issues on the Flexbugs GitHub repository but as they aren’t actually bugs, I’m not quite sure that’s the best place.

About The Author

Ben Frain is front-end web developer and author based in Cheshire, UK. His books, 'Enduring CSS', 'Responsive web design with HTML5 & CSS3' and 'Sass and Compass for Designers' are available now. You can follow him on Twitter @benfrain.