A closer look at Absolute and Relative flex-items

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.

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

-Albert Einstein

Here’s a good example.

Consider the markup below.