Flex Containers

Flex Containers

Everything in Flexbox starts with the flex container — the parent element that holds and controls the layout of its children. Setting display: flex on any element turns it into a flex container.

Creating a Flex Container

.container {
    display: flex;
}

/* Or inline flex (doesn't take full width) */
.container {
    display: inline-flex;
}

flex vs inline-flex

Property	Behavior
display: flex	Block-level — takes full width of parent
display: inline-flex	Inline-level — only as wide as its content

What Happens When You Add display: flex

1. All direct children become flex items
2. Items sit side by side in a row (default direction)
3. Items stretch to fill the container height (default alignment)
4. Items don't wrap — they shrink to fit in one line

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.container {
    display: flex;
    background: #f0f4f8;
    padding: 10px;
}

.box {
    background: #3498db;
    color: white;
    padding: 20px 30px;
    margin: 5px;
    font-size: 18px;
    font-weight: bold;
}

The three boxes automatically sit in a horizontal row.

flex-direction

Controls the direction flex items are placed in the container:

Value	Items Flow	Main Axis
row (default)	Left → Right	Horizontal →
row-reverse	Right → Left	Horizontal ←
column	Top → Bottom	Vertical ↓
column-reverse	Bottom → Top	Vertical ↑

/* Column layout — items stack vertically */
.container {
    display: flex;
    flex-direction: column;
}

/* Reverse row — items go right to left */
.container {
    display: flex;
    flex-direction: row-reverse;
}

justify-content — Main Axis Alignment

Controls how items are distributed along the main axis:

Value	Behavior
flex-start (default)	Items packed to the start
flex-end	Items packed to the end
center	Items centered
space-between	Equal space between items (no space at edges)
space-around	Equal space around each item (half-space at edges)
space-evenly	Equal space between and at edges

/* Center items horizontally */
.container {
    display: flex;
    justify-content: center;
}

/* Space items equally with no edge gaps */
.container {
    display: flex;
    justify-content: space-between;
}

gap — Spacing Between Items

.container {
    display: flex;
    gap: 16px;       /* Same gap in both directions */
    gap: 16px 24px;  /* row-gap | column-gap */
}

The gap property adds space between flex items without affecting the edges. Much cleaner than using margins.

All Container Properties Summary

Property	What It Controls
display	flex or inline-flex
flex-direction	Direction of the main axis
justify-content	Alignment along the main axis
align-items	Alignment along the cross axis
flex-wrap	Whether items wrap to the next line
gap	Spacing between items
align-content	Alignment of wrapped lines

Key Takeaways

• display: flex turns a container's children into flex items in a row
• flex-direction changes the flow: row, column, row-reverse, column-reverse
• justify-content distributes items along the main axis
• gap adds clean spacing between items without margin hacks
• Only direct children become flex items — nested elements are unaffected