Flexbox (CSS Flexible Box Layout Module) is relatively new layout module for CSS3. It was initially created to improve alignment, directions, and sequence of elements in a container even when their size is unknown or is changing dynamically.
This is the first full-fledged tool for page layouts. There were many attempts to develop similar solutions before. For example, Microsoft developed a tool for layout creation called Grid layout, but it didn’t gain much popularity and is used in Microsoft products. Flexbox layout has been updated several times comparing to the initial draft written in 2009. Its syntax hasn’t been changed since then. Below you can find the list of browsers and their versions supporting the latest Flexbox specification:
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (WebKit version)
- Android 4.4+
- iOS 7.1+ (WebKit version)
As you can see, Flexbox is supported only by the latest browser versions at the moment.
So what is Flexbox and what does it feature?
Flex layout consists of a parent container called flex container and its child elements – flex items. The main feature of a flex container is its ability to change width and height of its child items to fill the available screen space on various resolutions in the best way. In most cases, it is done to support all types of displays and screen sizes. Flex container stretches its elements to fill the free space or shrinks them to avoid overflowing. The most important thing is that Flexbox layout doesn’t depend upon block directions (vertical or horizontal).
Many designers and developers find Flexbox layout very easy-to-use because the positioning of elements occurs in a simpler way. As a result, you can create more complex layouts with less code, which in its turn makes the development easier. Flexbox layout algorithm is based on directions (unlike block or inline layouts which are based on verticals and horizontals). Flexbox layout is designed for smaller components of an application or small-scale layouts.
Flexbox is an effective and flexible method to manage all types of layouts. Thanks to this method there is practically no time delay between right and wrong rendering of your layout. When using JavaScript-based solutions the system spends some time to load the document, to load appropriate JS files and then to load images (if there are some) in blocks. Flexbox solution works immediately while JavaScript solutions require seconds. But even in this case JavaScript perfectly suits for those who use older browser versions that are not supported by Flexbox.