After we said goodbye to the good old table layout, CSS float has been the go-to method when dealing with web layouts. By default, block elements are stacked from top to bottom, but with CSS float and some other useful properties, we designers are able to code the layout as according to our design. However CSS float has many shortcomings and until now there are still no easy way to achieve certain layout.
Perhaps one of the most frustrating thing is how to make a block centered horizontally and vertically. Well certainly there are many solutions to it as explained on CSS-Tricks, but there are still a lot of conditions to meet. But with the new CSS Flexbox, it will solve many problems and change the way to create layouts.
What is Flexbox?
According to MDN, The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
That means with flex box, we can freely arrange the layout and blocks with sets of property from aligning, spacing to setting the order of the blocks. Sounds really cool but what about the browser compatibility.
Flexbox compatibility with browsers
According to CanIUse, Flexbox are generally supported by the modern browsers including Internet Explorer from version 10. But bear in mind that Flexbox has the old and new syntax. But with tools like Autoprefixer, or Sass Mixin library like Bourbon.io. So I can say is that we can safely use Flexbox now, but if you need to support IE9, then you can use conditionals (http://www.quirksmode.org/css/condcom.html) or feature detection tool like Modernizr to give a fallback for browsers that are not supporting Flexbox.
Well cool! I can start using Flexbox now! But I’m new to it, where can I learn Flexbox? Well below are some useful links to learn more and get started with Flexbox
A complete guide to Flexbox
Here’s the must-read guide to learn about Flexbox, from famous CSS blog, CSS Tricks. You can a complete overview on how to use flex box, with code samples and explanations of each properties.
CSS Flexbox Essentials – DevTips
Flexbox properties can be really confusing at first, with properties that are for parent elements and properties for child elements. Well it would be good if there’s a video tutorial about it. Luckily, here is the good and easy to follow video tutorial brought to you by DevTips. Once you are done with this video, there is a follow up video where the tutor Travis Neilson will teach you how to create Dribbble website with Flexbox.
Flexbox in 5 minutes
Ok, you have run through the videos, followed the code samples but still confused? Fear not, here is the interactive tutorial on Flexbox that can be completed under 5 minutes. Each steps will introduce the concept and the effect of value given to the Flexbox properties.
Solved by Flexbox
Here is this interesting link on how Flexbox solves many common CSS layout problems. It has about 6 layouts in total that were done with Flexbox.
In here, you can find quick code samples of CSS Flexbox and how you can use it to achieve certain layout effect.
Using Flexbox Today
You can also read this article, to learn about using the flex box with fallback and comparing two current trending layouts, card layout and split screen layout, created using float and also Flexbox. It also runs you through with step by step tutorial
For Japanese readers, here is the article from WebCreatorBox that teaches you how to use Flexbox to create maintainable web layouts. The site also stresses that, we should use Flexbox now!
Rico Sta. Cruz: Building a Modern Web UI – CSSConf.Asia 2014
There are more and more websites that are built like a native app instead of traditional website. With the help of CSS Flexbox, we can create application-like user interface easily and more controllable. Watch this video to find out how Flexbox can benefit you.
If you are looking into using Flexbox now and would like to get started quickly, perhaps you can check out this Flexbox Grid library and start to code Flexbox layout right away! But if you are looking for a more robust framework, you might want to checkout Foundation for Apps that uses Flexbox grid!