CSS3 Flexbox Layout

Image credit: intel.com

CSS has traditionally been associated with layout related problems. Whether it’s a cross browser issue or a cross platform issue, UI designers have always encountered one or the other. With advent of new CSS3 Flexbox Layout, most of these issues seem to have been taken care of.

In recent years, there have been many useful additions to CSS like CSS3 animations & transitions but the core issues related to layout had not been addressed until now. Flexbox module was introduced to precisely solve these issues. It takes a modular approach to UI development, allowing developers to quickly pick the UI layout components and proceed with other aspects of the design.

Flexbox has really enabled designers to focus on user experience rather than user interface with reduced development time & layout issues. In our earlier post, we covered the basic Flexbox properties & building blocks. In this post, we showcase some amazing CSS Flexbox layouts which you can use right away.

CSS3 Flexbox Grid Layout

Flexbox Grid

Who can forget the white space problem associated with inline-block items? Not to mention the numerous issues with float layout. Flexbox grids eliminate these problems with flexible sizing options. Grid cells in Flexbox grid are designed to fit to content. Multi-level nesting of grids is possible.

Other notable feature of CSS3 Flexbox Grid:

  • Support for responsiveness by adding media queries to the container or grid cells
  • Vertical alignment of individual grid cells


Flexbox Grid HTML

CSS Code for Basic Grid

Flexbox CSS

Flexbox layout with left navigation pane

FLexbox Left Navigation

Most common type of layout used across the web. Using traditional CSS blocks, this sort of layout will take substantial amount of CSS code. But with Flexbox, you can achieve the same layout with 5-6 lines of code.


Left Navigation Usage

Vertical centred layout using CSS3 Flexbox

Flexbox Centred Layout

CSS developers are well aware of the issues with vertical alignment of the elements. Although there are hacks available for this problem like “vertical-align:middle” or “display:table-cell”, they are far from perfect. With this flexbox layout, you can have all kinds of HTML elements vertically centred on a page without styling each of them individually.


Centred Layout Usage

Classic Holy Grail Layout with Flexbox


In case you haven’t heard about Holy Grail layout then please read here. This is a web page layout with standard header & footer along-with 3 columns in the middle section. Majority of sites follow this core layout principle. Now, the common problems associated with achieving this layout are:

  • Centre column should be fluid & the sidebars should be fixed-width
  • All 3 columns must be of equal height
  • Footer should stick at the bottom of the web page instead of leaving blank space

Again there are workarounds to solve these, but they are not full proof and often lead to other design issues.

CSS3 Flexbox offers a full-fledged solution to Holy Grail layout problem.


Flexbox Holy Grail Usage

Media Object Flexbox Layout

Media Objects with Flexbox

Media objects have been extensively used to create testimonials, author bio & quotes on websites. Common issue related to media object is the wrapping of text below image. Use Flexbox to create perfect media objects without the underlying issues.


Media Objects with Flexbox Usage

More Info