Most Web layouts today are based on some form of a grid system. How many of you have had to hack through your CSS to accommodate the notoriously unfriendly float and inline-block methods in order to lay out the designs? We no longer need to rely on these solutions beyond providing something visual to browsers without flex features. Flexbox features give us simple solutions for layout alignment and some extra flexibility around ordering. So in this post we`ve gathered some useful resources to help you get started with CSS Flexbox.

Flexbox

Flexbox explained on the Codrops CSS Reference by Sara Soueidan.

flexbox in 5 minutes

Take an interactive tour through all the major features of the new flexbox CSS property.

Playground

A colourful visual Flexbox playground.

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

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.

Sketch Flex Layout

A Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes.

Flexbox Froggy

Flexbox Froggy is a game for learning CSS flexbox.

Designing A Product Page Layout with Flexbox

I believe in the power of learning by doing. This article will take you through a recent release of a free Shopify theme called Venture and the steps to recreate the following product layout using Flexbox.

Crafting Twelve-Column Layouts with Flexbox

In a twelve-column layout, the page is broken into twelve invisible columns. These columns have small amounts of space between them, called gutters. The page is divided into rows, and the containers in the rows take up a certain number of columns.

Flexbox Cheatsheet

Quick visual to summarize Flexbox.

Flexbox Grid Finesse

Few techniques to exploit Flexbox’s internal algorithms and design seamless grids intended for changing quantities and varied dimensions of content.

Flexbox’s Best-Kept Secret

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow. It can be applied horizontally or vertically and it gives you more control of flex items along the main axis.

Bulma

Bulma is a modern CSS framework based on Flexbox.

Gridlex

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

Flexibility

Flexibility is a polyfill for the Flexible Box Layout, commonly known as Flexbox. With Flexibility, you get to design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.