FLEXBOX GENERATOR

Complete Flexbox Documentation

Everything you need to know about CSS Flexbox layout system

Table of Contents

1. Introduction to Flexbox

CSS Flexbox (Flexible Box Layout) is a powerful layout method that allows you to design complex layouts with ease. It's particularly useful for:

  • Creating responsive layouts that adapt to different screen sizes
  • Aligning items vertically and horizontally
  • Distributing space between items
  • Ordering items without changing HTML structure
display: flex;

2. Basic Concepts

Flex Container vs Flex Items

When you apply display: flex to an element, it becomes a flex container, and its direct children become flex items.

Main Axis vs Cross Axis

  • Main Axis: The primary axis along which flex items are laid out
  • Cross Axis: The axis perpendicular to the main axis
  • Direction depends on flex-direction
.container {
  display: flex;
  flex-direction: row; /* main axis: horizontal, cross axis: vertical */
}

.container-column {
  display: flex;
  flex-direction: column; /* main axis: vertical, cross axis: horizontal */
}

3. Container Properties

flex-direction

Defines the direction of the main axis.

Values:

  • row (default) - left to right
  • row-reverse - right to left
  • column - top to bottom
  • column-reverse - bottom to top

Example:

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

justify-content

Aligns items along the main axis.

Values:

  • flex-start - align to start
  • flex-end - align to end
  • center - center alignment
  • space-between - space between items
  • space-around - space around items
  • space-evenly - equal space

Example:

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

align-items

Aligns items along the cross axis.

Values:

  • stretch (default) - stretch to fill
  • flex-start - align to start
  • flex-end - align to end
  • center - center alignment
  • baseline - align to baseline

Example:

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

flex-wrap

Controls whether items wrap to new lines.

Values:

  • nowrap (default) - single line
  • wrap - wrap to new lines
  • wrap-reverse - wrap in reverse

Example:

.container {
  display: flex;
  flex-wrap: wrap;
}

align-content

Aligns wrapped lines (only works with multi-line flex containers).

Values:

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

Example:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

4. Item Properties

flex-grow

Defines how much a flex item should grow relative to other items.

Values:

  • 0 (default) - don't grow
  • 1 - grow equally
  • 2 - grow twice as much
  • Any positive number

Example:

.item {
  flex-grow: 1;
}

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

flex-shrink

Defines how much a flex item should shrink when space is limited.

Values:

  • 1 (default) - can shrink
  • 0 - don't shrink
  • Any positive number

Example:

.item {
  flex-shrink: 1;
}

.item-fixed {
  flex-shrink: 0;
}

flex-basis

Sets the initial main size of an item before free space is distributed.

Values:

  • auto (default) - use item's size
  • 0 - ignore item's size
  • 200px - specific size
  • 50% - percentage

Example:

.item {
  flex-basis: 200px;
}

.item-percentage {
  flex-basis: 33.333%;
}

flex (shorthand)

Combines flex-grow, flex-shrink, and flex-basis.

Common patterns:

flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 0 1 auto;    /* default: don't grow, can shrink, auto basis */
flex: 1 1 auto;    /* grow and shrink equally, auto basis */
flex: 0 0 200px;   /* fixed size item */
flex: 2;           /* grow twice as much as flex: 1 items */

align-self

Overrides the align-items value for individual items.

Values:

  • auto (default) - inherit from container
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Example:

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

order

Changes the visual order of items without changing HTML structure.

Values:

  • 0 (default) - natural order
  • -1 - move to beginning
  • 1 - move to end
  • Any integer

Example:

.item-first {
  order: -1;
}

.item-last {
  order: 1;
}

5. Alignment Guide

Horizontal Centering

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

Vertical Centering

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

Perfect Centering

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

Space Distribution

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

6. Common Patterns

Holy Grail Layout

Header, footer, and three-column layout with flexible center.

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 200px;
}

.content {
  flex: 1;
}

Responsive Card Grid

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

.card {
  flex: 1 1 300px; /* grow, shrink, min-width */
  max-width: 400px;
}

Navigation Bar

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

.nav-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

Sticky Footer

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1; /* takes remaining space */
}

.footer {
  flex-shrink: 0; /* don't shrink */
}

7. Responsive Design

Flexbox works excellently with media queries for responsive design:

/* Mobile first approach */
.container {
  display: flex;
  flex-direction: column;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    justify-content: space-between;
  }
}

Responsive Flex Items

.item {
  flex: 1 1 100%; /* Full width on mobile */
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 50%; /* Half width on tablet */
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 33.333%; /* Third width on desktop */
  }
}

8. Troubleshooting

Items not wrapping?

Make sure you have flex-wrap: wrap on the container.

Items not growing?

Check if flex-grow is set to 0 (default). Set it to 1 or higher.

Unexpected item sizes?

Remember that flex-basis sets the initial size before growing/shrinking.

Alignment not working?

Check if you're using the right property: justify-content for main axis, align-items for cross axis.

Gap between items?

Use gap property (modern browsers) or margin on items.

9. Browser Support

Flexbox has excellent browser support:

Modern Browsers (98%+ support)

  • Chrome 29+
  • Firefox 28+
  • Safari 9+
  • Edge 12+
  • iOS Safari 9+
  • Android Browser 4.4+

Legacy Support

  • IE 10-11: Partial support with bugs
  • Use prefixes for older browsers:
  • -webkit- for older Safari
  • -ms- for IE 10-11

10. Real-world Examples

Check out our collection of real-world flexbox examples:

Layout Examples

Component Examples

Application Examples

View All Examples

Quick Reference

Container Properties

  • display: flex
  • flex-direction: row | column
  • justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
  • align-items: stretch | flex-start | center | flex-end | baseline
  • flex-wrap: nowrap | wrap | wrap-reverse
  • gap: 1rem

Item Properties

  • flex: 1 (grow, shrink, basis)
  • flex-grow: 0 | 1 | 2...
  • flex-shrink: 1 | 0
  • flex-basis: auto | 0 | 200px | 50%
  • align-self: auto | flex-start | center | flex-end
  • order: 0 | 1 | -1