Using Flexbox?
A collection of helpful flexbox tools & resources
There is no doubt that CSS 3 flexbox is making complex, responsive layouts easier to build. Flexbox aims to provide more efficient layouts by aligning and distributing space among items in a container. The main idea behind aflexbox layout is to give the container the ability to alter the size of child items (often unknown or dynamic) to best fill the available space __ hello responsive design.
So what’s the current state of flexbox? Here are some essential resources to update your skillset, and better understand flexbox.
Flexbox Grid
A simple grid system based on the CSS flexbox that will help you along with your responsive designs.
Flexbox Patterns
Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code.
Flex Layout Attribute (FLA)
Layout helper based on CSS flexbox specification designed to serve..
The Ultimate Flexbox Cheat Sheet
Before you dive right into the cheat sheet, brush up on the fundamentals…
A Complete Guide to Flexbox
The Flexbox Layout (Flexible Box) module aims at providing a more..
Visual CSS Flexbox Builder
This CSS flexbox builder from WebFlow lets you easily build websites..
Flexbox Froggy
A game for learning CSS flexbox…
Flexy Boxes
Here’s a nice CSS flexbox playground and code generation tool that supports all existing flexbox implementations.
Flexbox in 5 Minutes
Take a step-by-step tour through the main properties of flexbox, including a few demos.
Flexplorer
A great tool to dive in to and explore the wonders of the CSS3 Flexible Box model.
Guide to Flexbox Alternatives
Unfortunately, not everyone has a browser/device capable of viewing flexbox layouts. This is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.
Originally published at www.topl.io.
