Flexbox: A beginner’s guide

A huge improvement in writing human CSS is Flexbox. Gone are the days of grappling with centering elements or crafting responsive page layouts.

Introduced in 2017, Flexbox (Flexbox Layout or Flexible Box) emerged as an efficient method for organizing, aligning, and distributing items within a container.

Its fundamental concept involves empowering the container to adjust the properties of its items—expanding or shrinking—to effectively occupy the available space.

A Parent-Child relationship

Flexbox operates on a parent-child relationship, where the section of a document structured with flexbox is referred to as a flex container (acting as the parent element).

HOW: Creating a flex container is easy, you only have to set the display value to flex or inline-flex.

The direct child elements of the flex container become flex items.

The flexbox axes

The flexbox layout is direction-agnostic. That means that the items will be laid out following either the main axis or the cross axis from start to end.

Main Axis:

The main axis is the primary axis along which the flex items are laid out in the flex container.
The main axis direction depends on the flex-direction property.
The flex items are placed within the container starting from main-start and going to the main-end point of axis.

The cross axis it’s the perpendicular direction to the main axis, and its direction depends on the main one.

Parent and Child Properties

Within flexbox, the interaction primarily occurs between the container and its immediate children. This delineates two main entities, each possessing its distinct set of CSS properties.

The values are row, row-reverse, column, column-reverse.

Parent properties:

Flex-direction property, values and how it affects the axis Flex-wrap property sets whether flex items are forced into one line or can wrap into multiple lines.