CSS Flex Container

Master flex container properties and control

📦 What is a Flex Container?

A flex container is any element with display: flex or display: inline-flex . It controls how its child elements (flex items) are arranged and spaced. 


/* Creating a flex container */
.container {
    display: flex;
    /* Now all direct children become flex items */
}

Visual Result:

Item 1
Item 2
Item 3

Flex Container Properties

➡️

flex-direction

Controls the direction of flex items 

flex-direction: row;
flex-direction: column;
🔄

flex-wrap

Controls whether items wrap to new lines 

flex-wrap: nowrap;
flex-wrap: wrap;
↔️

justify-content

Aligns items along the main axis 

justify-content: center;
justify-content: space-between;
↕️

align-items

Aligns items along the cross axis 

align-items: center;
align-items: stretch;

🔹 flex-direction Examples

The flex-direction property defines the main axis for flex item placement. Values: row (left-right), row-reverse, column (top-bottom), column-reverse. This controls flow order and direction, shaping layouts like navigation bars (row) or mobile sidebars (column). Understanding main and cross axes is key to alignment properties, offering responsive visual control without HTML changes.

🔸 Row Direction (Default) 

.container {
    display: flex;
    flex-direction: row; /* Items flow left to right */
}

Output:

A
B
C

🔸 Column Direction 

.container {
    display: flex;
    flex-direction: column; /* Items stack vertically */
}

Output:

A
B
C

🔹 justify-content Examples

justify-content aligns flex items along the main axis, distributing extra space. Values: flex-start, flex-end, center, space-between, space-around, space-evenly. Essential for balanced navigation, footers, or galleries, it controls spacing and alignment in both row and column directions. For example, space-between in a header pushes logo left and nav right, enhancing visual hierarchy.

🔸 Center 

.container {
    display: flex;
    justify-content: center;
}

Output:

Item 1
Item 2

🔸 Space Between 

.container {
    display: flex;
    justify-content: space-between;
}

Output:

Left
Right

🔹 align-items Examples

align-items aligns flex items along the cross axis (perpendicular to main axis). Values: stretch, flex-start, flex-end, center, baseline. Crucial for vertical alignment in rows or horizontal in columns. Combined with justify-content, it enables perfect centering. Mastering this ensures consistent heights, proper content alignment, and polished interfaces.

🔸 Center Alignment 

.container {
    display: flex;
    align-items: center;
    height: 100px;
}

Output:

Short
Tall Item
Short

🔹 Real-World Example: Card Layout

Create a responsive card layout using flex container properties: 

<!-- HTML -->
<div class="card-container">
    <div class="card">
        <h3>Card 1</h3>
        <p>Some content here</p>
    </div>
    <div class="card">
        <h3>Card 2</h3>
        <p>More content</p>
    </div>
    <div class="card">
        <h3>Card 3</h3>
        <p>Even more content</p>
    </div>
</div>
/* CSS */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    min-width: 200px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Output:

Card 1

Some content here

Card 2

More content

Card 3

Even more content

🧠 Test Your Knowledge

Which property centers flex items horizontally?