CSS3 Flexbox layout came into existence to primarily address the spacing issue between items of a container. The main driving factor behind Flexbox was ‘Responsive’ design. With existing layouts, the items within the container tend to bleed on different display devices.
Before we go into more details, let me clarify that Flexbox is just another layout like Block, Inline or Grid. So, implementing a Flexbox is pretty similar to other layouts in CSS.
Problems with existing layout options
Drawback of Block layout is that it’s vertically aligned, similarly Inline layout is horizontally aligned. In short, Block & Inline layouts are direction oriented and lack the flexibility to adapt properly on various screen sizes. Before Flexbox, designers used to try out different CSS tricks to tackle the responsiveness but there were numerous issues like cross browser compatibility, Follow-through effect due to resizing and so on. Web designers even resorted to using JS to fix the responsive design issues.
Flexbox offers a perfect solution to this by allowing the items within the container to freely adapt their width & height based on the display device screen size. Therefore, it’s a no brainer that Flexbox offer the most efficient utilization of available space.
Flexbox – Can I Use It For Page Layout?
Short answer is No. Flexbox is intended for designing individual UI elements and not the entire web page. To put in simple words, Flexbox is similar to Grid layout with additional flexibility and is best suited for small UI items.
Cross Browser Support & Flexbox Versions
Flexbox solves most of the cross browser issues associated with other layouts. Having said this, each browser has its own set of rules, so Flexbox has undergone number of revisions in order to satisfy various browser versions. Only exception being IE9, there have been reports of some issues with Flexbox on IE9. However, it’s a graceful failover that is often ignored by the browser.
Broadly, Flexbox is classified into 3 different versions – ‘Old’, ‘Inbetween (tweener)’ and ‘New’. Just ensure that you write the Flexbox syntax in right order to support all browser versions.
Here’s an example:
Key to mastering Flexbox is to understand that its direction agnostic. Meaning, it doesn’t have fixed horizontal or vertical alignment. You may change the angle of orientation.
Both Flexbox and its items have associated set of properties that offer maximum flexibility. Let’s have a look at some of them:
row – horizontal orientation
row-reverse – reverse horizontal orientation
column – vertical orientation
column-reverse – reverse vertical orientation
This is an item level property which tells the item to grow. The value is a proportion of the available space inside the container.
Some other important Flexbox properties:
flex-start: On container, it defines the start line for all items. At item level, it marks the start line for individual items.
flex-end: Like flex-start, it defines end line for all items within the container. When set at item level, it marks the end line for individual items.
Flexbox also supports some shorthand properties. For instance, flex-direction and flex-wrap can be substituted by the shorthand property, flex-flow.
Sample Flexbox Based Designs
Tournament Bracket with Flexbox
Here’s a fantastic example of Flexbox. You can see the power of using Flexbox to create such an inspiring layout with ease. Upon resizing the window, the Flexbox container along-with the items get appropriately resized too.
Responsive Pagination with Flexbox
Another example showing responsive page link menu created using Flexbox.
Calendar widget made by using Flexbox.
Closing notes – As you can see, Flexbox is certainly a positive & extremely useful feature of CSS3. With focus on responsive design increasing day by day, Flexbox is a must have design element.