Indroduction to Flexbox

What is Flexbox?

Flexbox is a layout module that uses CSS3.

Prior versions of CSS defined four (4) layout modes.

  • Blocked layout for laying out documents.
  • Inline Layout for laying our text.
  • Positioned layout for explicit positioning.
  • Table layout for laying out tabular data.

While Flexbox eases the development of flexible layouts, it is not fully compatible with all browsers. You probably guessed it, it is not supported by IE8 and IE9 and IE10 requires the -ms- prefix.

Flexbox Resources

  • CSS Tricks has  on of my favorite guides for flexbox. It keeps it simple and provides visual aides.
  • Caniuse.com lists Flexbox’s browser compatibility
  • W3Schools.com listing of CSS prefixes for Flexbox