An Anthology of Flexbox Tools and Tutorials (Frontend Development)

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

• Mozilla Flexboxes specification
• CHRIS COYIER`s Flexbox tutorial

Books to read

• https://unravelingflexbox.com/
• https://www.oreilly.com/library/view/flexbox-in-css/9781491981474/ (O'Riles books always best)
• https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/

Advanced examples

• https://www.flexboxpatterns.com/
• http://flexboxgrid.com/
• https://www.quackit.com/html/templates/css_flexbox_templates.cfm
• https://designmodo.com/flexbox-snippets/

Youtube tutorials

• CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
• Flexbox Tutorial (CSS): Real Layout Examples
• How to build complex layouts using CSS Flexbox and Grid

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.

• http://the-echoplex.net/flexyboxes/
• https://loading.io/flexbox/
• http://flexbox.buildwithreact.com/ (generator with a good preview)
• http://maxsteenbergen.com/fibonacci/ (looks like interesting UI, but not finished by my opinion:)
• https://flexbox.webflow.com/

Additional Examples

• https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35
• https://thenewstack.io/tutorial-css-flexbox-vs-grid-layout-ultimate-showdown/
• https://philipwalton.github.io/solved-by-flexbox/
• https://react.rocks/tag/Flexbox (Samples)
• https://flexboxfroggy.com/ (good game that can help you practice)

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

• https://dev.to/llorentegerman/simple-layouts-with-flexbox-in-react-55kf
• https://blog.buildo.io/flexview-the-easiest-way-to-use-flex-with-react-c698db55926a
• http://www.redbitdev.com/getting-started-with-react-flexbox-grid/
• https://medium.com/flexbox-and-grids/if-you-love-reactjs-youll-love-the-css-grid-52933e0d61ac
• https://medium.com/flexbox-and-grids (Collection or articles)
• https://medium.com/flexbox-and-grids/free-courses-49ce873bfa75
• https://reactjsexample.com/react-flexbox-grid-made-simple/

React packages

• https://roylee0704.github.io/react-flexbox-grid/ or https://www.npmjs.com/package/react-flexbox-grid
• https://github.com/jxnblk/reflexbox
• https://github.com/paulmelnikow/react-flexbox-svg
• https://github.com/ekros/nice-react-layout
• https://github.com/buildo/react-flexview
• https://ant.design/ (it have layouts, that using flexboxes)

React Native

• https://facebook.github.io/react-native/docs/flexbox
• https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6
• https://github.com/facebook/yoga (Yoga for Facebook is a good layout for application development)

TOOLKIT

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 

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!