Monday, June 16, 2014

Basic HTML structure/skeleton with CSS Flexbox Layout

We need some kind of miracle to get rid of IE8 and IE9 and start development with the IE 10+ version. I do understandIt will take some more years for it to happen. But, if you are working on a project that needs compatibility only for the latest and greatest browsersyou can start with flexbox layout right now. Most of the flexbox properties work very well in IE 10 with -ms- prefixes. Here's more on Flexible box ("Flexbox") layout in Internet Explorer 10.

Keeping the restriction in mind I thought of putting up a plain HTML page skeleton with CSS Flexbox which works as a liquid layout without any width and height properties specified.

My previous post [ CSS Flexbox explained with examples ] focuses on the real-world scenarios where the flexbox properties work as life-saver. With it, I can proudly say No to the floats, widths and heights. Also, to the overflow in some cases so that I don’t have to worry about the elements overlapping or adjusting the widths pixel-by-pixel to keep them aligned. Flexbox does it for me.

Here is a Fiddle:

Related articles:
CSS Flexbox explained with examples