CSS

Mastering CSS Flexbox: The Ultimate Tutorial

By Sajid Khan July 28, 2026

CSS Flexible Box Layout, commonly known as Flexbox, is a one-dimensional layout model that provides a highly efficient way to lay out, align, and distribute space among items within a container.

The Flex Container

To use flexbox, you must first define a flex container. This is done by setting the display property to flex or inline-flex.

                        .container {

                            display: flex;

                        }

Flex Direction

The flex-direction property defines the direction in which the flex items are placed in the flex container. The default is row, which means items are placed left to right.

row: Left to right
column: Top to bottom
row-reverse: Right to left

Alignment Properties

One of the strongest features of Flexbox is its alignment capabilities. You can align items on the main axis using justify-content and on the cross axis using align-items.

justify-content

Use justify-content: center; to center items horizontally in a row, or space-between to push the first item to the start and the last item to the end.

Flexbox has completely replaced old hacky layout methods like floats and table displays. If you want to build responsive websites today, Flexbox is mandatory knowledge.