Site Color

Text Color

Ad Color

Text Color





Sign Up to Save Your Colors


An Anthology of Flexbox Tools and Tutorials (Frontend Development) by@arthur.tkachenko

An Anthology of Flexbox Tools and Tutorials (Frontend Development)

Arthur Hacker Noon profile picture



We have a lot of great tutorials and courses, related to flexboxes.

I don’t want to create an article, that will explain the flexbox basics. My goals are to put into one place links, that I find interesting and tell you what you can do, in order to master this tool.

If you’ll find some mistakes, or we forget to put something here — buzz me at comments.

Of course, the main source of information is Flexbox Specification.

If you want to have a practice assessment, you can create a calendar layout using flexboxes, or recreate some of the website blocks from Design Blocks

Full Tutorials

Books to read

Advanced examples

Youtube tutorials

Code generators

I’m not sure if it a good idea to generate code for flexbox layouts. Because you’re not learning at this moment, but at least code will be cross-browser and working well.

Additional Examples

If you want to read about React and Flexboxes, check this list below
to read:

React packages

React Native


For practice I use CodePen.

Github — if you ok to share your code with other — My current pick

Bitbucket — if you want to have a free storage

Google drive & Dropbox — if you just want to save your code at cloud

You can also use codesandbox of some other stuff.

Code editors

Sublime I use it around 6 years. Small size and has everything important.

Atom because it’s baked by GitHub team and it’s also have a GitHub sync.

Stay Tuned!