CSS Flex Container

A Flex Container is a parent element that uses display: flex; to create a Flexbox layout.

Once an element becomes a flex container, its direct child elements automatically become flex items.

What is a Flex Container?

Basic Syntax

.container {
    display: flex;
}

The display: flex; declaration changes the parent element into a Flex Container.

Flex Container Structure

Parent and Child Relationship

Flexbox works through a parent-child relationship. Only the direct children of a Flex Container become Flex Items.

<div class="container">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

Example: Creating a Flex Container

Consider a course website containing three technology cards. We can use Flexbox to place the cards in a row.

.course-container {
    display: flex;
    gap: 15px;
    padding: 20px;
    border: 3px solid #2563eb;
    background-color: #dbeafe;
}

.course {
    flex: 1;
    background-color: lightblue;
    border: 2px solid blue;
    padding: 20px;
    text-align: center;
}

Output

Important Flex Container Properties

display: flex

The most important declaration for Flexbox is display: flex;.

.container {
    display: flex;
}

Real-World Example

Suppose CIIT Training Institute has three course cards: C#, Java, and Python.

Instead of manually positioning every card, Flexbox can place them inside one container and control their spacing and alignment.

.courses {
    display: flex;
    gap: 15px;
}

.course {
    flex: 1;
}

This approach makes the layout easier to maintain and adapt for different screen sizes.