Flexbox, short for Flexible Box Layout, is a powerful layout module in CSS designed to streamline the alignment, distribution, and organization of elements within a container.

The flexbox layout model operates on a parent-child relationship. The parent, referred to as the flex container, is responsible for dictating the layout of its child elements, known as flex items. By leveraging a range of flexbox properties, we can precisely control the size, position, and order of flex items within the flex container.

Note

Inside the flex container, many conventional positioning rules do not apply as expected. Let's examine the following list:

• Working with flex differs from handling inline or block-level elements;
• Unlike block-level elements, flex elements do not obstruct other elements, and they do not stack on top of each other;
• Margins applied at the edges of the parent element do not extend beyond.

Flex Model

Since we're not dealing with inline or block elements, the document flow in the flex model is determined by the axes of the flex container, along which all items align. To initiate flexbox behavior, we apply the display: flex; property to the parent element containing all the items.

We can influence the direction in which flex items are arranged. By default, flex items are positioned in a row. However, we can alter this behavior using the flex-direction property. Let's compare the document flow without flex and with flex: