What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It provides a more efficient way to distribute space among items in a container and align them.

Key Features:

• One-dimensional: Control either rows OR columns (not both)
• Flexible: Items can grow and shrink to fill available space
• Responsive: Easy to create responsive layouts
• Powerful alignment: Precise control over item alignment
• Widely supported: Excellent browser support

Creating a Flex Container

To create a flexbox layout, you need to set the display property to flex or inline-flex on a container element.

/* Basic flex container */
.flex-container {
    display: flex;
}

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

Controlling Flex Direction

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

/* Row direction (default) */
.flex-container {
    display: flex;
    flex-direction: row;
}

/* Row reverse */
.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

/* Column direction */
.flex-container {
    display: flex;
    flex-direction: column;
}

/* Column reverse */
.flex-container {
    display: flex;
    flex-direction: column-reverse;
}

Controlling Flex Wrap

The flex-wrap property determines whether flex items wrap to new lines.

/* No wrap (default) */
.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

/* Wrap to new line */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

/* Wrap reverse */
.flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
}

/* Shorthand */
.flex-container {
    display: flex;
    flex-flow: row wrap; /* direction wrap */
}

Horizontal Alignment

The justify-content property aligns flex items along the main axis (horizontal in row direction).

/* Start alignment (default) */
.flex-container {
    display: flex;
    justify-content: flex-start;
}

/* End alignment */
.flex-container {
    display: flex;
    justify-content: flex-end;
}

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

/* Space between */
.flex-container {
    display: flex;
    justify-content: space-between;
}

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

/* Space evenly */
.flex-container {
    display: flex;
    justify-content: space-evenly;
}

Cross-Axis Alignment

The align-items property aligns flex items along the cross axis (vertical in row direction).

/* Stretch (default) */
.flex-container {
    display: flex;
    align-items: stretch;
}

/* Start alignment */
.flex-container {
    display: flex;
    align-items: flex-start;
}

/* End alignment */
.flex-container {
    display: flex;
    align-items: flex-end;
}

/* Center alignment */
.flex-container {
    display: flex;
    align-items: center;
}

/* Baseline alignment */
.flex-container {
    display: flex;
    align-items: baseline;
}

Multi-Line Alignment

The align-content property aligns flex lines when there's extra space in the cross axis (only works with multiple lines).

/* Stretch (default) */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

/* Start alignment */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

/* End alignment */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

/* Center alignment */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

/* Space between */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

/* Space around */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

Individual Item Control

You can control individual flex items using specific properties.

/* Flex grow */
.flex-item {
    flex-grow: 1; /* Item can grow */
}

/* Flex shrink */
.flex-item {
    flex-shrink: 1; /* Item can shrink */
}

/* Flex basis */
.flex-item {
    flex-basis: 200px; /* Initial size */
}

/* Shorthand flex */
.flex-item {
    flex: 1 1 200px; /* grow shrink basis */
}

/* Align self */
.flex-item {
    align-self: center; /* Override container alignment */
}

/* Order */
.flex-item {
    order: 2; /* Change display order */
}

Flexbox Guidelines

• Use for components: Flexbox is perfect for navigation, cards, and form layouts
• Combine with Grid: Use Flexbox within Grid areas for complex layouts
• Plan your layout: Consider the main and cross axes before coding
• Use shorthand properties: flex: 1 instead of separate properties
• Consider accessibility: Ensure logical tab order and screen reader support
• Test responsiveness: Verify layouts work on all screen sizes
• Use flex-basis: Set initial sizes for better control
• Avoid fixed widths: Let flexbox handle sizing when possible

Common Flexbox Patterns

/* Centered card */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

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

/* Form layout */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Responsive sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 250px; /* Don't grow, don't shrink, 250px basis */
}

/* Equal height columns */
.equal-height {
    display: flex;
    gap: 1rem;
}

.equal-height > * {
    flex: 1;
}