This is the updated version of an article published on 4th February 2013. Updates include:rewriting paragraphs and sections to fit new developments in browser support for flexbox and in CSS with the advent of Grid Layout, creating live demos on CodePen, modifying code snippets, title change, adding a featured image, and a few grammatical changes.
Do you remember when tables were the only layout method for a website? At least until people realized that it’s a semantic nightmare to misuse something that’s actually reserved to display tabular data for the structure of an internet site. So a new “tool” needed to be found and soon floats and absolute positioning were discovered as a “proper” replacement.
Just like tables, of course, the true purpose of these two methods wasn’t to give websites a shape.
Only recently, major browsers have provided support for CSS Grid Layout, a robust layout engine built into CSS. You could use Grid in production websites right now, provided you cater for non supporting browsers with appropriate fallbacks.
A great fallback strategy is to serve flexbox-based (or “Flexible Box Layout Module” as the W3C likes to call it) layouts to all browsers without support for Grid Layout. This works great in most cases, since today flexbox has excellent browser support across the board.
Advantages of Using Flexbox
Some of the advantages of flexbox are:
- Page content can be laid out in any direction (to the left, to the right, downwards or even upwards)
- Bits of content can have their visual order reversed or rearranged
- Items can “flex” their sizes to respond to the available space and can be aligned with respect to their container or each other
- Achieving equal-column layouts (irrespective of the amount of content inside each column) is a breeze.
To illustrate the various properties and possibilities let’s assume the following simple layout for some of the demos in this article:
header content here
nav content here
main content here
aside content here
footer content here
The first step is to place the elements within
<aside>, side by side. Without flexbox we’d probably float all the three elements, but making it work as desired wouldn’t be very straightforward. Moreover, the traditional way of doing things would present a well-known problem: every column is just as high as its content. As a consequence, you would need to set an equal height for all three columns to have the same length, or use some sort of hack.
Enter flexbox to the rescue.
The core element of flexbox is the new
flex value of the
display property, which needs to be set for the container element. Doing so turns its children into “flex items”. These items acquire some handy properties by default. For example, they get placed side by side, and elements without a specified width automatically take up the remaining space.
So, if you set
display: flex for
.content child element is automatically squeezed in between
<aside>. No more calculations, how handy is that? As a special bonus, all of these three elements magically have the same height.
Check out the demo below for all the details:
The Order of Things: Flexbox
Another property of flexbox is the ability to easily change the order of elements. Let’s assume you’ve built the above layout for a client and she now wants
.content to come before
Normally, you’d dive into the HTML source code and change the order there. With flexbox you can accomplish the task entirely with CSS. Just set the
order property of
-1 and the content column will come first.
In this case you don’t need to state the order for the other columns:
If you prefer to specify the value of the
order property explicitly for each column instead, you can go ahead and set
<nav> and to
Continue reading %A Friendly Introduction to Flexbox for Beginners%