Flexbox is a new layout method that was introduced in CSS3, made to create and control layouts using CSS. By using grids (flex container), it allows you to modify the width or height of child elements to dynamically fill available spaces in the best way possible. It is highly valuable when developing for different screen sizes.

The flow container adds a touch of order to the already chaotic way we code for the web. It makes child elements within it to behave predictably without having to resort to any CSS hacks or JavaScript dependencies.

To get started on Flexbox, here’s a useful visual guide to understand it’s properties and some practical examples.

Visual Guide Practical Examples