CSS Flexbox: Flex Container and Flex Items

CSS Flexbox stands for the Flexible Box Layout Module. It is a CSS layout method used to arrange items in a single dimension, either in a row or a column. Before diving into its properties, it's important to understand some key terms in Flexbox

CSS Flexbox Components:

• Flex Container → The parent, or we can say the element with display : flex property. For ex:

  <div> Element.

• Flex Items → The children elements of the flex container, or we can say items inside the flex container(<div>).

CSS Flexbox Axis:

In Flexbox, layout and alignment are manager along two axis:

1) Main Axis :

• The primary axis is the axis along which flex items are placed.

• It can be horizontal or vertical depending on the flex-direction .

2) Cross-Axis:

• The axis perpendicular to the main axis.

• Its direction depends on the flex-direction.

  

CSS Flexbox properties for flex container:

These properties are applied to the parent element (flex container) with display: flex .

CSS Flexbox properties for flex items:

These properties are applied to the child elements (flex items) of the flex container.