CSS Flexbox Learning guides, tools and frameworks

Flexbox is a more efficient layout that allows for better allocation of container space and control of project alignment. Although the theory of mastering it is somewhat complex, fortunately, we can learn from the open network and gradually grasp it.

In this article, we've integrated some of the best Flexbox learning resources that can help you understand all aspects of Flexbox. Involved in what is Flexbox and how to use it effectively.

Flexbox Study Guide

CSS Flexbox Reference (Sara Soueidan)

The Flexbox reference to CSS is a series of articles that learn Flexbox basics. In this article, you can learn the various properties of Flexbox and understand them better through the excellent interactive demonstrations in the text.

Gain insight into flexbox-design, tools, and Workflow (Greg Smith)

In the article "in-depth understanding of Flexbox," we will learn more about the brief history of Flexbox, as well as the technical details of its syntax.

Translator Note:Chinese translation--"portal"

Using the CSS Flex box (MDN)

A complete Flexbox guide (Chris coyier)

Perhaps this complete Flexbox guide will give you an idea of everything about Flexbox. The article contains a number of examples that will help you to master it faster.

Translator Note: Chinese Translation--"portal"

How to get started with CSS Flexbox (Paul Underwood)

This tutorial will guide you through the use of CSS Flexbox to start with a simple layout and gradually take you through more complex layout instances.

CSS3 Flexbox Property Visualization Guide (Dimitar)

This visual guide will not only help you understand the basic concepts of CSS3 Flexbox, but also show you how the various properties of Flexbox affect the layout of the page.

Translator Note: Chinese Translation--"portal"

What is Flexbox?! (Wes Bos)

This tutorial will take advantage of 20 free videos to help you unlock Flexbox layout skills! Sometimes, learning through video tutorials tends to be much better than complex discussions.

5-minute Learning Flexbox (interactive tour)

If you are tired of reading lengthy tutorials, then 5 minutes of learning Flexbox will be better for you. This is a simple interactive tutorial where you will learn what Flexbox is and how it is applied in just 5 minutes with 53 slides. Flexbox Instances and resources

Flexbox mode (CJ Cenizal)

Flexbox mode will take you through some code examples to open the Flexbox learning journey.

Flexbox solution (Philip Walton)

The Flexbox solution will show you examples of using Flexbox to solve specific problems.

Atom on Flexbox Code Auto complement plug-in

This plugin makes it easy to write Flexbox code in the Atom editor.

Sublime Text on Flexbox Code Auto-complete plug-in

Similar to the functionality of the above plugin, you can use it in the Sublime Text editor.

Web-based Flexbox tools

Flexplorer (Bennett feely)

Flexplorer is a tool to create complex layouts with a simple visual interface.

CSS Flexbox please! (Eiji Kitamura)

CSS Flexbox please! is an online tool that automatically generates FLEX layouts. At the same time, it also provides the corresponding CSS and HTML code.

Test CSS Flexbox Rules Live (Tayler summs)

Real-time testing of CSS Flexbox rules This online tool will show you how each of the Flex properties affects the layout.

Flexbox Tester (Eiji Kitamura)

Flexbox Tester can help you understand how to calculate the width of Flex item.

Flexibility (10UP)

The intuitive menu on flexibility can help you understand how the various Flex properties change the Flexbox layout.

Fibonacci Flexbox Page layout writer (Max Steenbergen)

The Fibonacci Flexbox page layout Writer is a non-developer-oriented layout tool that you can use to create a Flex layout.

Flexy Boxes (Pete boere)

Flexy Boxes will help you build a flex layout, and you can adjust the properties of the Flex container and the project at the same time.

Flexbox Playground (Gabi Siquès)

Flexbox Playground will let you experience the power of Flex properties with a variety of displays.

Translator Note:This work won the top ten works of Codepen in 2016 years.

Flexbox Editor (Brian Diehr)

You can test your flex layout in Flex box Editor by dragging and dragging the boxes and adjusting their properties.

Translator Note:This tool has been deactivated. :（
Flexbox-based WEB framework

Flexbox Grid-grid system based on Flexbox

The Flexbox Grid is an easy-to-use framework that has a large number of instances for creating various types of layouts.

Cssplus-Layout scaffolding based on Flexbox

Cssplus helps you create flexible, responsive layouts based on Flexbox.

STRUCTURE-declarative grid framework based on Flexbox

STRUCTURE is a declarative framework-this means that it uses nonstandard attributes for elements. This reduces development time, rather than adding several CSS classes to each project.

Juiced–flexbox CSS Framework

Inspired by Foundation and Bootstrap, Juiced is a flexible CSS front-end framework that has made improvements to existing grid-based CSS frameworks. At the same time, it is built on the flexible box layout specification.

Easter eggs

Flexbox Froggy (Thomas Park)

By doing some fun games, to feel the joy of learning. Flexbox Froggy is a game that requires you to write Flexbox code to clear the customs.

finally

When you use the Flexbox layout properly, it can even simplify complex layout tasks. So, start using these resources today and improve your development efficiency.

is not, still some not enjoyable. Then, the translator will add some good resources, let you learn to vomit ....

No! No! No! Should be to learn high.

CSS Flexbox Learning guides, tools and frameworks