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
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
CSS Code for Basic Grid
Flexbox layout with left navigation pane
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.
Vertical centred layout using CSS3 Flexbox
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.
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.
Media Object Flexbox Layout
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.