Getting Started with CSS Flexbox – Introduction, Tutorials, Live Demos and Resources

Flexbox is now a buzzword in web design and development community. Flexbox is the great CSS3 feature to build complex layout without using any third-party framework or any Javascript library. How to get started with Flexbox? All you need to know the basics of Flexbox, you can build very flexible and complex layout by just using vanilla CSS.

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

Flexbox gives you the power to create flexible(flexible) grid(box) system without using messy CSS codes, CSS Frameworks or Javascript. Each Flexbox starts with a container we can call it a parent, and there could be unlimited items under the flexbox can be said child.

Basic Code Example of Flexbox:

//The HTML
<div class="parent">
 <div class="child">
   <h3>Item 1</h3>
 <div class="child">
  <h3>Item 2</h3>
 <div class="child">
  <h3>Item 3</h3>
 <div class="child">
  <h3>Item 4</h3>

//The CSS for Simple Flexbox Container/Parent

 display: flex;

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:

Browser Support

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:

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:

If you have any confusion, advice or resource suggestions to improve this post. Please, feel free to comment.

Getting Started with CSS Flexbox – Introduction, Tutorials, Live Demos and Resources
4.5 (90%) 2 votes

Posted on: Resource, Tutorial | Tags: , ,

Never miss FREE stuffs!

Join our 15,000+ subscribers and get access to the latest

Templates, Freebies, Tutorials and Useful Resources!

Your information will never be shared with third-party