Articles & Publications
Discover the best tools and products to aid in your development workflow.
Flexbox – True Layout Properties for CSS without a Framework
Observations for creating Flexbox layouts in CSS
We have tried everything to tame the elusive HTML layouts. We began with tables, then divs using CSS floats and even changing the display property but nothing was easy without a number of hacks and feats of magic.
Now entering, Flexbox! The flexbox module is a collection of wonderful new CSS properties that I’ve been excited about since I came across it on www.css-tricks.comand even more
Floats were never really meant to be used the way that we use them for layout. It’s original intent was to align images in content. ?But, some rather clever individuals played with the property and here we are today; using floats for layout. It is an okay solution, but very quirky.
We can use the properties of flexbox now, especially for mobile since those have the most up-to-date browsers, but desktop won’t be fully supported by IE until version 11. ?The current browser support is as follows:
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- iOS any
- Android any
By this time next year, I may be saying bye bye to any CSS framework I am using for layout.
I found a couple of resources that will allow you to play around with flexbox and also a site created by Phillip Walton that made a Boostrap-esque presentation site on how to use flexbox:?http://philipwalton.github.io/solved-by-flexbox/. ?It’s great! ?And of course, CSS-Tricks has a complete guide to flexbox that I have found very useful:?http://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you want to play around with the properties here are a few codepens that have used flexbox for responsive layouts: