Learn about fundamental and advanced CSS Flexbox concepts to design responsive layouts. Gain insights into creating a Responsive Music App seamlessly using the Flexbox model.

This course will cover all the fundamental and advanced concepts you need to get good with the CSS Flexbox model. You will learn to layout a Responsive Music App in the process. It is a detailed course, and I hope you’re ready for it.

Understanding Flexbox: Everything you need to know

This is perhaps the shortest article in this interactive course. However, it is important. Remember the goal of this course is to truly *"understand"* the inner workings of the Flexbox model.

Having covered some ground in previous sections, it’s important to clarify a few important concepts here too.

What really is the difference between an absolute and relative flex-item?

The major difference between these two is got to do with spacing and how they are computed.

The spacing within a relative flex item is computed based on it’s content size. In an absolute flex item, it is based solely on “flex”, not content.

 
 

<center style="color:white; background-color:#3498DB; border-radius:5px; padding:15px;">Example isn't another way to teach, it is the only way to teach.

-Albert Einstein</center>

 
 

Here's a good example.

Consider the markup below.

This is perhaps the shortest article in this interactive course. However, it is important. Remember the goal of this course is to truly *"understand"* the inner workings of the Flexbox model.

Having covered some ground in previous sections, it’s important to clarify a few important concepts here too.

What really is the difference between an absolute and relative flex-item?

The major difference between these two is got to do with spacing and how they are computed.

The spacing within a relative flex item is computed based on it’s content size. In an absolute flex item, it is based solely on “flex”, not content.

 
 

<center>Example isn't another way to teach, it is the only way to teach.

-Albert Einstein</center>

 
 

Here's a good example.

Consider the markup below.

Introduction

Flex Container

Flex Items

Absolute and Relative Flex Items

Auto Margin Alignment

Switching Flex Direction

Flexbox Solved That

Building a Music App Layout with Flexbox

Responsive Design with Flexbox

Conclusion

A closer look at Absolute and Relative flex-items