CSS Flexbox

What Is CSS Flexbox?

CSS Flexbox, also called the Flexible Box Layout, is a layout model that makes it easy to arrange elements in one direction: either horizontally as a row or vertically as a column. Flexbox gives you powerful control over alignment, spacing, order, wrapping, and sizing.

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

When you set display: flex; on a parent element, its direct children become flex items.

Why CSS Flexbox Is Important

• Creates flexible row and column layouts.
• Aligns items horizontally and vertically with less CSS.
• Handles spacing between items using gap.
• Builds responsive navigation menus and card layouts.
• Supports equal-height cards and flexible components.
• Reduces the need for floats and positioning hacks.
• Works well with modern component-based UI design.

CSS Flexbox Cheatsheet

The following table explains the most commonly used Flexbox properties.

Flex Container and Flex Items

A flex container is the parent element with display: flex;. The direct children of that container become flex items.

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

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

Flexbox properties are divided into container properties and item properties.

Main Axis and Cross Axis

Flexbox has two axes. The main axis follows the direction set by flex-direction. The cross axis runs perpendicular to the main axis.

justify-content works on the main axis, while align-items works on the cross axis.

display: flex

Use display: flex; to create a block-level flex container.

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

This is commonly used for headers, navigation bars, toolbars, and horizontal layouts.

display: inline-flex

Use display: inline-flex; when the flex container should behave like an inline element.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

This is useful for buttons, badges, links with icons, chips, and compact controls.

flex-direction

The flex-direction property controls the direction of flex items.

.row-layout {
  display: flex;
  flex-direction: row;
}

.column-layout {
  display: flex;
  flex-direction: column;
}

justify-content

justify-content aligns flex items along the main axis.

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

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

align-items

align-items aligns flex items along the cross axis.

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

This is one of the easiest ways to vertically align items inside a row.

flex-wrap

The flex-wrap property allows items to move onto new lines when there is not enough space.

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Use wrapping for tags, chips, card rows, filter controls, and responsive item groups.

gap in Flexbox

The gap property adds spacing between flex items without adding margins to individual children.

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

gap is cleaner than using margin for spacing between items.

flex-grow, flex-shrink, and flex-basis

These properties control how flex items grow, shrink, and start their sizing.

.card {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 250px;
}

flex Shorthand

The flex property is shorthand for flex-grow, flex-shrink, and flex-basis.

.card {
  flex: 1 1 250px;
}

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

Responsive Card Layout with Flexbox

Flexbox is useful for responsive card rows that wrap naturally.

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

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

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

Center an Element with Flexbox

Flexbox makes horizontal and vertical centering simple.

.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

CSS Flexbox and Accessibility

Flexbox can change visual order, but keyboard and screen reader order still follow the HTML source order.

• Keep HTML source order logical.
• Avoid using order to create confusing reading order.
• Use visible focus states inside flex layouts.
• Ensure wrapped content remains readable on small screens.
• Use enough spacing for touch targets.

CSS Flexbox and SEO

Flexbox does not directly affect search rankings, but it improves page layout, mobile usability, readability, accessibility, and user experience.

• Responsive flex layouts improve mobile usability.
• Clean component layouts improve readability.
• Logical source order supports accessibility and content clarity.
• Better alignment and spacing improve user engagement.
• Reduced layout hacks improve maintainability and page quality.

Common CSS Flexbox Mistakes

• Using Flexbox for complex two-dimensional layouts where Grid is better.
• Forgetting that only direct children become flex items.
• Confusing justify-content and align-items.
• Using order in a way that hurts accessibility.
• Forgetting flex-wrap: wrap; for responsive item rows.
• Using margin hacks instead of gap.
• Not testing layouts on small screens.
• Allowing flex items to shrink too much and break content.

CSS Flexbox Best Practices

• Use Flexbox for one-dimensional layouts.
• Use Grid for two-dimensional page layouts.
• Use gap for spacing between flex items.
• Use flex-wrap: wrap; for responsive rows.
• Use align-items: center; for vertical alignment in rows.
• Keep HTML source order meaningful.
• Avoid unnecessary order values.
• Use flex: 1 1 auto; or custom basis values for flexible items.
• Test Flexbox layouts on mobile, tablet, and desktop.
• Use DevTools Flexbox inspector to debug alignment and spacing.

Key Takeaways

• Flexbox is a one-dimensional layout system.
• display: flex; creates a flex container.
• Direct children of a flex container become flex items.
• justify-content aligns items on the main axis.
• align-items aligns items on the cross axis.
• flex-wrap allows items to wrap onto new lines.
• gap adds clean spacing between items.
• flex controls item growth, shrink behavior, and base size.