CSS Flexbox
Wouldn't it be great if a CSS property could automatically scale up and down elements in some container, add spacing between them and give us easy access to both horizontal and vertical alignment? Guess what! The CSS Flexible Box Layout (flexbox) does all of this and more.
It provides us a box model optimized for user interface design, and can position and size items in one dimension.
All we need to get a container to start using a flexbox layout is to
set display: flex; on it. All child elements will then become
flexible.
Flexbox Froggy
A game called Flexbox Froggy teaches CSS Flexbox through 24 simple steps. Give it a try!
A complete guide to Flexbox
This comprehensive Guide may be helpful when working with CSS Flexbox and its different properties in the assignments.
Read more on MDN
Basic concepts of flexbox