Syllabus

On this page

Flex Container and Flex Items

Badar KhalilUpdated October 1, 2026 6 min read

Flex Container and Flex Items Explained

Every flex layout has two roles: the flex container (the parent that has display: flex) and the flex items (its direct children). Knowing which property belongs to which role is the single biggest time saver when learning CSS Flexbox. Half of all Flexbox bugs come from putting a property on the wrong element.

What You Will Learn

How to create a flex container with display: flex and display: inline-flex
Which elements become flex items (and which do not)
The complete list of container properties and item properties
What stops working on flex items (float, clear, vertical-align)
How nested flex containers work
The min-width: auto gotcha that causes overflow

Creating a Flex Container

CSS

.container {
  display: flex;          /* block-level flex container */
}

.inline-container {
  display: inline-flex;   /* inline-level flex container */
}

Both values create a flex formatting context for the children. The difference is only how the container itself sits in its own parent:

display: flex: the container is block-level and takes the full available width.
display: inline-flex: the container is inline-level and shrinks to fit its content, like an inline-block. Useful for badges, pill buttons and icon+text labels.

What Becomes a Flex Item?

Only the direct children of a flex container become flex items. Grandchildren are not affected and behave normally inside their parent item.

HTML

<div class="container">      <!-- flex container -->
  <div class="item">         <!-- flex item -->
    <p>Normal paragraph</p>  <!-- NOT a flex item -->
  </div>
  <div class="item">Two</div> <!-- flex item -->
</div>

Special Cases

Text directly inside the container is wrapped into an anonymous flex item automatically.
Whitespace-only text is ignored, so there are no inline-block style gaps.
Absolutely positioned children do not participate in flex layout; they are taken out of flow.
Children with display: none generate no flex item.
Margins do not collapse between flex items, unlike block margins.

Properties That Go on the Container

Property	What it controls	Common values
`display`	Turns on flex layout	`flex`, `inline-flex`
`flex-direction`	Direction of the main axis	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Whether items can wrap to new lines	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Shorthand for direction + wrap	`row wrap`
`justify-content`	Space distribution on the main axis	`flex-start`, `center`, `space-between`, `space-around`, `space-evenly`
`align-items`	Alignment of items on the cross axis	`stretch`, `flex-start`, `center`, `flex-end`, `baseline`
`align-content`	Spacing of wrapped lines on the cross axis	`flex-start`, `center`, `space-between`
`gap`, `row-gap`, `column-gap`	Space between items	`16px`, `1rem`

Properties That Go on the Items

Property	What it controls	Default
`flex-grow`	How much of the free space this item takes	`0`
`flex-shrink`	How willing the item is to shrink when space is short	`1`
`flex-basis`	Starting size before growing or shrinking	`auto`
`flex`	Shorthand: grow shrink basis	`0 1 auto`
`align-self`	Overrides `align-items` for one item	`auto`
`order`	Visual order of the item	`0`

Memory trick: container properties describe the group (direction, wrap, distribution, alignment). Item properties describe one child (how much it grows, shrinks, where it starts, whether it aligns differently).

The `flex` Shorthand You Will Use Daily

Declaration	Meaning	Typical use
`flex: 1`	grow 1, shrink 1, basis 0	Equal-width columns, fill remaining space
`flex: auto`	grow 1, shrink 1, basis auto	Grow from content size
`flex: none`	grow 0, shrink 0, basis auto	Fixed-size item that never resizes
`flex: 0 0 250px`	no grow, no shrink, 250px wide	Sidebar with a locked width

What Stops Working on Flex Items

float and clear have no effect on flex items.
vertical-align has no effect; use align-items or align-self.
display on an item is "blockified": an item set to inline behaves like block.
::first-line and ::first-letter do not apply to the container itself.

Nested Flex Containers

A flex item can itself be a flex container. This is extremely common: a navbar (flex row) contains a link group (flex row) and each card in a list (flex row) contains its own content (flex column). Each container manages only its own direct children, so you can combine rows and columns freely.

The min-width: auto Gotcha

Flex items have an automatic minimum size equal to their content. That means a long word, a wide image or a pre block can refuse to shrink and push the layout wider than its container. The fix is to allow the item to shrink:

CSS

.item {
  min-width: 0;        /* allow shrinking below content size */
  overflow: hidden;    /* or auto, to handle overflow */
}

This tiny fix solves a large share of "why is my flex layout overflowing" questions, especially with text truncation (text-overflow: ellipsis) inside flex items.

Common Mistakes

Applying justify-content to an item. It belongs on the container.
Applying flex-grow to the container. It belongs on the items.
Expecting nested elements to flex. Add display: flex to that nested parent as well.
Using margin instead of gap. gap is cleaner: no extra space after the last item.
Overusing order. Screen readers and keyboard focus follow source order, so large visual reordering can hurt accessibility.

Key Takeaways

The container has display: flex; its direct children are the items.
Container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, gap.
Item properties: flex-grow, flex-shrink, flex-basis, flex, align-self, order.
Use min-width: 0 to fix overflow caused by unshrinkable content.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .box { background: #ecf0f1; padding: 10px; margin-bottom: 12px; }
  .flex { display: flex; gap: 8px; }
  .inline-flex { display: inline-flex; gap: 8px; background: #ecf0f1; padding: 10px; }
  .item { background: #3498db; color: #fff; padding: 12px 18px; border-radius: 6px; }
</style>
<p><code>display: flex</code> (block-level, full width)</p>
<div class='box flex'><div class='item'>A</div><div class='item'>B</div></div>
<p><code>display: inline-flex</code> (shrinks to content)</p>
<div class='inline-flex'><div class='item'>A</div><div class='item'>B</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; gap: 10px; background: #ecf0f1; padding: 10px; }
  .item { background: #2ecc71; color: #fff; padding: 14px; border-radius: 6px; }
  .item p { background: #27ae60; margin: 8px 0 0; padding: 6px; }
</style>
<div class='container'>
  <div class='item'>Item 1<p>I am a normal paragraph inside Item 1, not a flex item</p></div>
  <div class='item'>Item 2</div>
  Loose text becomes an anonymous flex item
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; text-align: center; color: #fff; }
  .container { display: flex; gap: 10px; background: #ecf0f1; padding: 10px; }
  .item { padding: 16px; border-radius: 6px; }
  .a { background: #e74c3c; flex: 1; }
  .b { background: #3498db; flex: 2; }
  .c { background: #f39c12; flex: 0 0 120px; }
</style>
<div class='container'>
  <div class='item a'>flex: 1</div>
  <div class='item b'>flex: 2</div>
  <div class='item c'>flex: 0 0 120px</div>
</div>
<p style='color:#333'>Red takes 1 share, blue takes 2 shares of the remaining space, orange stays fixed at 120px.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; color: #fff; text-align: center; }
  .container { display: flex; align-items: flex-start; gap: 10px; height: 180px; background: #ecf0f1; padding: 10px; }
  .item { background: #8e44ad; padding: 16px; border-radius: 6px; }
  .special { align-self: flex-end; background: #e67e22; }
  .first { order: -1; background: #16a085; }
</style>
<div class='container'>
  <div class='item'>1</div>
  <div class='item special'>2 (align-self: flex-end)</div>
  <div class='item'>3</div>
  <div class='item first'>4 (order: -1)</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .card-list { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
  .card { display: flex; align-items: center; gap: 14px; border: 1px solid #dcdde1; border-radius: 10px; padding: 12px; }
  .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #3498db; }
  .info { display: flex; flex-direction: column; }
  .info strong { font-size: 1rem; }
  .info span { color: #7f8c8d; font-size: 0.85rem; }
</style>
<div class='card-list'>
  <div class='card'><div class='avatar'></div><div class='info'><strong>Ayesha Khan</strong><span>Frontend Developer</span></div></div>
  <div class='card'><div class='avatar'></div><div class='info'><strong>Ali Raza</strong><span>UI Designer</span></div></div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .row { display: flex; gap: 10px; width: 320px; border: 2px dashed #7f8c8d; padding: 8px; }
  .sidebar { flex: 0 0 90px; background: #ecf0f1; padding: 8px; }
  .text { flex: 1; background: #dff9fb; padding: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* min-width: 0; */ }
</style>
<div class='row'>
  <div class='sidebar'>Side</div>
  <div class='text'>ThisIsAVeryLongUnbrokenTextThatWantsToOverflowTheContainer</div>
</div>
<p>Uncomment <code>min-width: 0;</code> and see the text truncate properly.</p>

Output

Press Run to execute.

Exercise: Equal Columns and a Fixed SidebarHTML

Make .layout a flex container with a 16px gap. The .sidebar must be exactly 200px wide and never grow or shrink. The two .col elements must share the remaining space equally. Use the flex shorthand on every item.

Try it Yourself HTML

<style>
  * { box-sizing: border-box; }
  body { font-family: sans-serif; }
  .layout > div { padding: 16px; color: #fff; }
  .sidebar { background: #2c3e50; }
  .col { background: #3498db; }
</style>
<div class='layout'>
  <div class='sidebar'>Sidebar</div>
  <div class='col'>Column 1</div>
  <div class='col'>Column 2</div>
</div>

Output

Press Run to execute.

Show expected output

Sidebar is 200px wide, two blue columns are equal width and fill the rest, 16px gap between all three.

This is a self-check — compare your result with the expected output above.

Exercise: Fix the Overflowing Flex ItemHTML

The long title pushes the layout wider than the 360px container. Without changing the HTML, fix the CSS so the title is truncated with an ellipsis and the button stays fully visible on the right.

Try it Yourself HTML

<style>
  .bar { display: flex; align-items: center; gap: 10px; width: 360px; border: 2px dashed #7f8c8d; padding: 8px; font-family: sans-serif; }
  .title { flex: 1; white-space: nowrap; }
  button { flex: none; }
</style>
<div class='bar'>
  <div class='title'>A_really_long_course_title_that_does_not_fit_inside_the_bar</div>
  <button>Open</button>
</div>

Output

Press Run to execute.

Show expected output

The title is cut with an ellipsis (...) inside the bar and the Open button stays visible inside the 360px container.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

Flex Container and Flex Items Explained

What You Will Learn

Creating a Flex Container

What Becomes a Flex Item?

Special Cases

Properties That Go on the Container

Properties That Go on the Items

The flex Shorthand You Will Use Daily

What Stops Working on Flex Items

Nested Flex Containers

The min-width: auto Gotcha

Common Mistakes

Key Takeaways

The `flex` Shorthand You Will Use Daily