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>
 <div class="child">
  <h3>Item 2</h3>
 </div>
 <div class="child">
  <h3>Item 3</h3>
 </div>
 <div class="child">
  <h3>Item 4</h3>
 </div>
</div>

//The CSS for Simple Flexbox Container/Parent

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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: http://caniuse.com/#feat=flexbox

You may also like:   10+ Tips on Selling More Bootstrap Templates and WordPress Themes in Marketplaces

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

Mohammad Musharrof

Mohammad Musharrof is Head of GrayGrids Team. He had his hand on the computer keyboard when he was in School. In his entire web journey, he experimented his expertise making many of websites on different CMS. Since then he has been developing Bootstrap Templates and WordPress themes passionately with the predominant focus on Front End Development.