CSS Flexbox: Syntax, Usage, and Examples

CSS Flexbox provides a layout model that distributes space efficiently along a single axis. It allows you to create responsive layouts without relying on floats or positioning tricks. Flexbox simplifies flexible and adaptive web design.

How to Use CSS Flexbox

To enable Flexbox, set the display property of a container to flex. This makes all direct children flexible items.

.container {
  display: flex;
}

By default, items align in a row. You can modify direction, alignment, spacing, and sizing using various Flexbox properties.

When to Use CSS Flexbox

Use Flexbox when elements need to adjust dynamically based on available space. Some common use cases include:

1. Centering Content Easily

Aligning elements vertically and horizontally can be challenging in CSS. Flexbox makes it simple:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

This centers content inside the container both vertically and horizontally.

2. Creating Responsive Layouts

Flexbox distributes space dynamically, making it perfect for responsive designs. A navigation bar, for example, can automatically adjust link spacing:

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

This ensures that items spread evenly across the available width.

3. Managing Columns Without Float

Instead of using float-based layouts, you can create flexible column structures with Flexbox.

.columns {
  display: flex;
}

.column {
  flex: 1;
}

This ensures that all columns take up equal space without requiring extra margin calculations.

Examples of CSS Flexbox in Action

Creating a Two-Column Layout

Flexbox simplifies two-column layouts that adjust dynamically.

.container {
  display: flex;
}

.left {
  flex: 2;
}

.right {
  flex: 1;
}

This layout gives the left column twice as much space as the right one.

Aligning Items at the Bottom

To align an element at the bottom of a flex container, use align-items: flex-end;.

.container {
  display: flex;
  align-items: flex-end;
  height: 300px;
}

Evenly Spacing Elements

Use justify-content: space-around; to distribute items evenly inside a container.

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

This places equal space around each element while maintaining balanced spacing.

Learn More About CSS Flexbox

All Flexbox Commands in CSS

CSS provides multiple properties to control Flexbox behavior:

• display: flex; activates Flexbox.
• flex-direction: row | column | row-reverse | column-reverse; defines the main axis.
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; aligns items along the main axis.
• align-items: flex-start | flex-end | center | baseline | stretch; aligns items along the cross-axis.
• flex-grow: <number>; determines how items grow relative to each other.
• flex-shrink: <number>; controls how items shrink when space is limited.
• flex-basis: <value>; sets the default size before growth/shrinking.
• order: <number>; rearranges elements within a flex container.
• align-self: flex-start | flex-end | center | baseline | stretch; overrides item alignment.

CSS Flexbox vs. CSS Grid

Flexbox and Grid both help create layouts but serve different purposes. Flexbox works along a single axis (row or column), making it ideal for aligning items dynamically. Grid, on the other hand, works on both axes simultaneously, making it better for complex layouts. Use Flexbox for UI components and Grid for full-page layouts.

Applying the Flex Property in CSS Flexbox

The flex property combines flex-grow, flex-shrink, and flex-basis into a single shorthand:

.item {
  flex: 1 1 auto;
}

This means the item can grow and shrink as needed while maintaining an automatic size.

Using Flexbox to Match a Sibling Element’s Background

To apply the background of one sibling element to another inside a flex container, use flex-grow to ensure equal width and background-color: inherit; to apply the same background.

.container {
  display: flex;
}

.item {
  flex: 1;
  background-color: inherit;
}

Flexbox Cheat Sheet for Quick Reference

Keep these Flexbox properties in mind:

• display: flex; enables Flexbox.
• flex-direction: row | column; sets the main axis.
• justify-content: space-between | center; aligns items horizontally.
• align-items: center | flex-start; aligns items vertically.
• flex: 1; ensures equal sizing.

CSS Flexbox for Two Columns

You can create a flexible two-column layout using Flexbox:

.container {
  display: flex;
}

.column {
  flex: 1;
}

This ensures two equal-width columns that scale dynamically.

CSS Flexbox simplifies layout management by reducing the need for complex float-based positioning. By using its properties effectively, you can create adaptable, responsive designs with minimal effort.