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

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


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match

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