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
- 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:
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 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!