Today, I am here to introduce you Flexbox and want to share some essential tutorials, live demos and resources to get started your own frontend project using CSS Flexbox.
Flexible + Box = Flexbox
Basic Code Example of Flexbox:
//The CSS for Simple Flexbox Container/Parent
Here is an interesting Flexbox examples with code from CodePen:
flexplorer – The CSS3 Flexible Box layout explorer
You can find all useful Flexbox CSS properties with visual explanation from here:
The most common question can pop up on your mind is “browsers are ready to support Flexbox?” Yes, it is. There are no reasons not use Fexbox right now, almost 90% of browsers supports Flexbox feature correctly, and already it is widely applied on live projects. You can learn more about browser support from here: http://caniuse.com/#feat=flexbox
Tutorials and Resources
In-depth video tutorial on CSS Flexbox with Live Preview: I like the way how he presented in interactively so anyone can learn mechanism of CSS Flexbox.
and Finally, here are some must-read articles on CSS Flexbox:
- – https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- – https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
- – https://envato.com/blog/css3-flexbox/
- – https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
If you have any confusion, advice or resource suggestions to improve this post. Please, feel free to comment.