Flexbox makes it easier to control the position, alignment, spacing, and direction of elements. It is especially useful when building responsive layouts.

Why Use Flexbox?

Before Flexbox, developers often used floats, inline-block elements, or complicated positioning techniques to arrange elements.

Flexbox provides a simpler way to arrange elements horizontally or vertically.

For example, a navigation bar may contain a logo, menu items, and a button. Flexbox can arrange these elements in a single row and control the spacing between them.

Flexbox is also useful when the available screen size changes because the items can adjust according to the available space.

Basic Syntax

To create a Flexbox container, apply display: flex; to the parent element.

.container {
    display: flex;
}

Flexbox Diagram

Item 1

Item 2

Item 3

Parent = Flex Container | Children = Flex Items

Flex Container and Flex Items

Flexbox has two important concepts: the flex container and the flex items.

Flex Container

The parent element on which display: flex; is applied. It controls the layout of its child items.

Flex Items

The direct child elements inside a flex container are called flex items.

Example: Creating a Flex Container

In this example, three elements are placed inside one parent container. Applying display: flex arranges them in a row by default.

.container {
    display: flex;
}

.item {
    background-color: lightblue;
    border: 2px solid blue;
    padding: 20px;
}

Output

HTML

CSS

JavaScript

Default Flex Direction

By default, Flexbox places flex items in a row.

.container {
    display: flex;
}

The default value of flex-direction is row.

This means the child elements are placed from left to right in a horizontal line.

You can change this behavior using the flex-direction property. This will be covered in the next topics.

Important Flexbox Properties

Property	Purpose
display	Creates the Flexbox container using display: flex.
flex-direction	Controls the direction of flex items.
flex-wrap	Controls whether items wrap onto multiple lines.
justify-content	Controls alignment along the main axis.
align-items	Controls alignment along the cross axis.
gap	Creates space between flex items.

Advantages of Flexbox

Easy Alignment

Flexbox provides simple properties for horizontal and vertical alignment.

Flexible Layout

Flex items can grow, shrink, and adjust according to the available space.

Responsive Design

Flexbox helps layouts adapt to different screen sizes.

Less Code

Many common layout problems can be solved with a few Flexbox properties.

Where is Flexbox Used?

Flexbox is commonly used for navigation bars, menus, cards, buttons, form layouts, headers, footers, and many other interface components.

For example, a course website can use Flexbox to place course cards next to each other.

A navigation bar can use Flexbox to arrange the logo, menu links, and action buttons.

A login form can also use Flexbox to align labels, inputs, and buttons in a clean layout.

Important: Flexbox works with a parent-child relationship. The parent becomes the flex container, and its direct children become flex items.

Summary

Flexbox is a CSS layout system designed to arrange and align elements efficiently. A parent element becomes a flex container when display: flex; is applied. Its direct children become flex items. Flexbox provides properties for direction, wrapping, alignment, spacing, and flexible sizing, making it very useful for responsive web layouts.

← Previous: Overflow

Next: Flex Container →