Flexbox

Flexbox is a convenient CSS property that makes web design and layout a much simpler process. However, since it's a relatively new addition to the CSS tool set, you will find that certain browsers and devices act a bit strange when you start using it. Even with that caveat, I added flexbox to the CSS we use for all of our AIG Consumer websites to help with layout and positioning of elements on the page irrespective of DOM order at mobile breakpoints.

There are two key things to keep in mind when using the flexbox propery. First of all, if your CSS code is not mobile first, you want to remove all floats that may be present at the desktop breakpoints. If you were to set a flex container and the child elements are floated, you get some really strange behavior with element positioning.

The second important issue deals mainly with Blackberry 7 browser support. Strangely, the flexbox property is supported, however the quirk with Blackberry is that it ignores the flex declaration if you have set the child elements to row wrap. In order to remedy this situation, you should be declaring the orientation and direction of your flex container to be vertical and column.

Once you have all that set in place, it should be relatively easy to style the layout of your page. You can see the code we finally used below to make sure the flex ordering and wrapping worked propely since our CMS ouputs the center grid element after the right grid element in the HTML.

#grid_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}
#gridRight {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
  width: 100%;
  padding-left: 0;
  float: none;
}
#gridCenter {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}