Understand Flexbox: Aligning and Distributing Items easily

Flexbox Basics and terminology

Flexbox is a CSS layout module used for creating responsive and dynamic designs. It provides an efficient and flexible way to align, distribute, and space items within a container. It is especially helpful when the size of elements is unknown or dynamic.

Terminology

Flex Container: The parent element to which flex properties are applied.

Flex Items: The child elements inside the container that follow the flex rules.

Main Axis: The primary direction of the flex container in which items are aligned (horizontal or vertical).

Cross Axis: The direction perpendicular to the main axis is called the cross axis.

Main Start | Main End: The starting and ending points of the main axis.

Cross Start | Cross End: The starting and ending points of the cross axis.

Main Size & Cross Size: The size (width or height) of an item based on the main axis and cross axis.

Flex Container Properties

Properties for the Parent (flex container)

display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, gap, row-gap, column-gap

Flex Items Properties

Properties for the Children (flex items)

order, flex-grow, flex-shrink, flex-basis, flex, align-self