Creating columns can be a tricky task in webdesign.For many year web designers used tables to show content in columns. More recently, designers have been using CSS floats. Flexbox is a nickname for CSS Flexible Box Layout Module. Flexbox is a CSS property that makes it possible display content in columns without the need of using floats or tables. Here are 18 resources for mastering CSS3 flexbox.

A Complete Guide to Flexbox

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Full-width pinned layouts with flexbox

Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox’s re-ordering capabilities, we can make this layout pattern even more responsive.

Flexbox adventures

One of the Flexbox’s greatest strength is its ability to calculate space, this is a huge gain when it comes to lists of items where space is an issue but we can’t determine how many items are going to exist.

Flexbugs

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.

Flexplorer

Dive in to and explore the wonders of the CSS3 Flexible Box model.

Fibonacci

Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox, without having to learn HTML or CSS.

Flexbox in the real world

Flexbox is awesome, but is it possible to use flexbox and still support IE8? If you follow these guidelines, you can start using flexbox today.

Flexbox for forms

This is the perfect opportunity to employ a lil’ bit o flex-box. Starting with some simple markup, we’re going to sprinkle a couple of classes through the markup.

Don’t use flexbox for overall page layout

When I was building this blog I tried to use flexbox for the overall page layout because I wanted to look cool and modern in front of my peers. However, like all of my other attempts to look cool and modern, it didn’t really work.

Flexbox Grid

A grid system based on the flex display property.

CSS Vertical Center with Flexbox

We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior. Whether it turns out that way remains to be seen but flexbox does easily solve a problem CSS has had for far too long: CSS vertical centering.

Tricks with Flexbox for Better CSS Patterns

If you started writing CSS a few years ago, the chances are you’ve become accustomed to a few quirks of CSS layouts that you’ve taken to be unavoidable. For instance, using absolutely positioned elements inside of relatively positioned elements, or using clearfix in conjunction with floats to achieve column grids.

Pure CSS off-canvas menu with flexbox

Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

Why Flexbox? In short, the Flexbox Layout module was designed to solve problems exactly like this. It is an efficient and flexible way to manage probably all types of layouts. It provides almost no time gap between initially wrong and correctly laid out layout look.

Styling with STRINGS

When creating mobile “App” layouts, where not the whole page is scrollable, but instead only certain parts. And you have anchored areas like header/footer and a main area that should fill out the available space, then the easiest way is to use Flexbox.

Dive into Flexbox

Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail.

The Ultimate Flexbox Cheat Sheet

Power of Flexbox, Calc, & Viewport Units

This is a basic example of how powerful flexbox is when tied with calc & viewport units.