CSS Flexbox. All You Need To Know To Start Using Flex

Posted by TotalDC

This complete guide explains everything about CSS Flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).

What is CSS Flexbox

The Flexbox Layout module provides a more efficient way to lay out space between items in a container, even when size is unknown or dynamic.

The main idea of the flexbox is to give the container the ability to alter items’ width and height and their order to fill the available space the best way possible. A flex container expands items to fill available free space or shrinks them to prevent overflow.

Flexbox layout is free from any directional constraints than regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack the flexibility to support large complex applications when it comes to orientation changing and resizing or stretching and shrinking.

Basics and Terminology Of CSS Flexbox

Since Flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (also known as flex container or simply as parent element). While the others are meant to be set on the flex items (children elements).