A Friendly Introduction to Flexbox for Beginners

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:

[code language="html"]
<div class="example">
<header>
header content here
</header>
<main class="main">
<nav>
nav content here
</nav>
<div class="content">
main content here
</div>
<aside>
aside content here
</aside>
</main>
<footer>
footer content here
</footer>
</div>
[/code]

The first step is to place the elements within .main, i.e., <nav> and <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.

Let’s Flex

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 .main, its .content child element is automatically squeezed in between <nav> and <aside>. No more calculations, how handy is that? As a special bonus, all of these three elements magically have the same height.

[code language="css"]
.main {
display: flex;
}
[/code]

Check out the demo below for all the details:

See the Pen Flexbox Tutorial: Display Property by SitePoint (@SitePoint) on CodePen.

The Order of Things: Flexbox order Property

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 <nav>.

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 .content to -1 and the content column will come first.

[code language="css"]
.main {
display: flex;
}

.content {
order: -1;
}
[/code]

In this case you don’t need to state the order for the other columns:

See the Pen Flexbox Tutorial: Order Property by SitePoint (@SitePoint) on CodePen.

If you prefer to specify the value of the order property explicitly for each column instead, you can go ahead and set order to 1 for .content, to 2 for <nav> and to 3 for <aside>.

Continue reading %A Friendly Introduction to Flexbox for Beginners%

by Christian Krammer via SitePoint