CSS Flex Items

What Are CSS Flex Items?

A flex item is any direct child of an element with display: flex; or display: inline-flex;. The parent is called the flex container, and the children are called flex items.

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
  gap: 1rem;
}

.flex-item {
  flex: 1;
}

In this example, each .flex-item becomes part of the Flexbox layout.

Why Flex Items Are Important

• They control how individual elements grow and shrink.
• They help create equal-width or flexible-width layouts.
• They support responsive card rows and form layouts.
• They allow one item to align differently from others.
• They can change visual order inside a flex container.
• They help build modern UI components without float hacks.

CSS Flex Items Cheatsheet

The following table explains the most important CSS properties used on flex items.

Only Direct Children Become Flex Items

Flex item properties apply to direct children of the flex container. Nested elements are not flex items unless their own parent also becomes a flex container.

<div class="cards">
  <article class="card">
    <h2>Card Title</h2>
    <p>Nested content inside the card.</p>
  </article>
  <article class="card">Another card</article>
</div>

.cards {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1;
}

Here, the .card elements are flex items, but the h2 and p inside the card are not flex items of .cards.

flex-grow

The flex-grow property controls how much a flex item grows when there is extra space in the flex container.

.item {
  flex-grow: 1;
}

If all flex items have flex-grow: 1;, they share the available extra space equally.

.item-primary {
  flex-grow: 2;
}

.item-secondary {
  flex-grow: 1;
}

In this example, the primary item grows twice as much as the secondary item.

flex-shrink

The flex-shrink property controls how much a flex item shrinks when there is not enough space.

.logo {
  flex-shrink: 0;
}

.nav-list {
  flex-shrink: 1;
}

Use flex-shrink: 0; when an item should keep its size, such as logos, icons, avatars, and fixed controls.

flex-basis

The flex-basis property sets the starting size of a flex item before available space is distributed.

.card {
  flex-basis: 260px;
}

flex-basis is useful for responsive cards, columns, sidebars, and form fields.

flex Shorthand

The flex shorthand combines flex-grow, flex-shrink, and flex-basis.

.card {
  flex: 1 1 260px;
}

This means the item can grow, can shrink, and starts with a base size of 260px.

align-self

The align-self property overrides the container’s align-items value for one specific flex item.

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

.special-item {
  align-self: flex-start;
}

Use align-self when one item needs different cross-axis alignment.

order

The order property changes the visual order of flex items.

.featured-card {
  order: -1;
}

.secondary-card {
  order: 2;
}

Use order carefully because keyboard navigation and screen readers follow the HTML source order, not the visual order.

Auto Margins on Flex Items

Auto margins can push flex items away from others. This is useful in navigation bars and toolbars.

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-actions {
  margin-inline-start: auto;
}

In this example, .nav-actions moves to the far end of the navigation bar.

min-width: 0 in Flex Items

Long text inside flex items can overflow because flex items often have an automatic minimum size. Setting min-width: 0; allows text to shrink and wrap properly.

.media-object {
  display: flex;
  gap: 1rem;
}

.media-content {
  min-width: 0;
}

.media-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

This is a common fix for card titles, table-like rows, media objects, and dashboards.

Responsive Flex Items Example

Flex item sizing is useful for responsive cards that wrap naturally.

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-list > .card {
  flex: 1 1 260px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
}

Each card starts at 260px, grows when space is available, and wraps when needed.

Equal-Width Flex Items

Use flex: 1; to create equal-width items.

.stats-row {
  display: flex;
  gap: 1rem;
}

.stat-card {
  flex: 1;
}

This pattern works well for stats cards, pricing columns, dashboard widgets, and feature rows.

Fixed and Flexible Flex Items

You can combine fixed-size and flexible items in one layout.

.media-object {
  display: flex;
  gap: 1rem;
}

.media-image {
  flex: 0 0 96px;
}

.media-content {
  flex: 1 1 auto;
}

This is useful for media objects, comments, profile rows, and product cards.

CSS Flex Items and Accessibility

Flex item properties can visually change layout, but they should not create confusing reading or keyboard navigation order.

• Keep source order logical in HTML.
• Use order carefully.
• Do not rely on visual order alone to communicate meaning.
• Make sure flexible items do not shrink until text becomes unreadable.
• Keep focus states visible inside flex items.
• Test responsive flex item behavior on mobile and zoomed screens.

CSS Flex Items and SEO

Flex item properties do not directly create SEO rankings, but they improve responsive layout quality, readability, accessibility, and user experience.

• Responsive item sizing improves mobile-friendly design.
• Readable layouts help users engage with content.
• Logical source order supports content clarity.
• Better component layout improves scanability.
• Maintainable layout CSS supports better long-term page quality.

Common Flex Item Mistakes

• Using order in a way that breaks reading order.
• Forgetting that flex item properties only apply to direct children.
• Using flex-grow without understanding available space.
• Using flex-shrink: 0; too much and causing overflow.
• Forgetting min-width: 0; when text truncation does not work.
• Using fixed widths when flex-basis would be more flexible.
• Expecting align-self to affect main-axis alignment.
• Not testing flex item wrapping on small screens.

CSS Flex Item Best Practices

• Use flex: 1; for equal-width items.
• Use flex: 1 1 260px; for responsive cards.
• Use flex: 0 0 auto; for icons, buttons, and fixed-size controls.
• Use min-width: 0; when long text must shrink or truncate.
• Use align-self only when one item needs special cross-axis alignment.
• Use auto margins for pushing items in navbars or toolbars.
• Use order sparingly and keep source order logical.
• Prefer flexible sizing over fixed widths for responsive layouts.
• Test flex item behavior on mobile, tablet, desktop, and zoomed text.

Key Takeaways

• Flex items are direct children of a flex container.
• flex-grow controls how items grow.
• flex-shrink controls how items shrink.
• flex-basis sets the starting size.
• flex is shorthand for grow, shrink, and basis.
• align-self overrides cross-axis alignment for one item.
• order changes visual order but not HTML source order.
• min-width: 0; is often needed for text truncation in flex layouts.