Flex Container

Written by Swapnil RajaUpdated 15 Aug 2026

A Flex Container is an HTML element that uses CSS Flexbox Layout to arrange and align its child elements.

To create a flex container, use:

css

display: flex;

When an element becomes a flex container:

Its direct children become flex items
Items are arranged in a row by default
Alignment and spacing become easier to control
Responsive layouts become simpler to create

Flexbox is one of the most widely used CSS layout systems in modern web development. The supporting concepts are explained in Flex Direction and Justify Content.

Syntax

PreviousMulti-column Layout NextFlex Direction

.container {
    display: flex;
}

Property	Description	Example
display: flex	Creates a flex container	display: flex;
flex-direction	Defines item direction	flex-direction: row;
justify-content	Aligns items horizontally	justify-content: center;
align-items	Aligns items vertically	align-items: center;
flex-wrap	Controls item wrapping	flex-wrap: wrap;

Flex Container Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Flex Container Example</title>
    <style>
        .container {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            gap: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Flex Container

Syntax

Attributes

Example

Browser Support

Notes

Before and After Flexbox

Conclusion