From Theory to Practice: Deep Dive into Flexbox Layout Generator#

Building a dashboard recently, I kept running into complex layout requirements: centered navigation bars, vertically distributed sidebars, self-adapting card grids… Each time I had to check the docs and experiment for hours. So I decided to systematically review Flexbox principles and built a visual tool along the way.

Core Concepts of Flexbox#

The key to Flexbox is understanding two axes: main axis and cross axis.

.container {
  display: flex;
  flex-direction: row; /* Main axis direction */
}

flex-direction determines the main axis:

  • row: Main axis horizontal right, cross axis vertical down
  • column: Main axis vertical down, cross axis horizontal right
  • row-reverse / column-reverse: Reversed direction

All alignment properties work based on these two axes. Once you understand axis direction, other properties become intuitive.

justify-content: Main Axis Alignment#

This is the most commonly used property, controlling how children are distributed along the main axis:

.container {
  display: flex;
  justify-content: space-between; /* Distribute to both ends */
}

Available values:

  • flex-start: Align to start (default)
  • flex-end: Align to end
  • center: Center align
  • space-between: Distribute to both ends, equal spacing between elements
  • space-around: Equal spacing on both sides of each element (including ends)
  • space-evenly: All spacing completely equal

Visual difference:

flex-start:  [■■■■      ]
flex-end:    [      ■■■■]
center:      [    ■■■■  ]
space-between: [■■  ■■  ■■]  (Ends touch edges)
space-around:  [ ■■ ■■ ■■ ]  (Half spacing at ends)
space-evenly:  [ ■■ ■■ ■■ ]  (All spacing equal)

In practice, space-between is most common, perfect for navigation bars, card lists, etc.

align-items: Cross Axis Alignment#

Controls how children align on the cross axis:

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

Available values:

  • stretch: Stretch to fill container (default)
  • flex-start: Align to cross axis start
  • flex-end: Align to cross axis end
  • center: Center on cross axis
  • baseline: Align to text baseline

Classic scenario: Icon + text vertical centering

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

baseline alignment is often overlooked but useful when text sizes differ:

<div style="display: flex; align-items: baseline;">
  <span style="font-size: 32px;">Large</span>
  <span style="font-size: 14px;">Small</span>
</div>

Both texts align to their baselines, not top or bottom.

flex-wrap: Wrapping Control#

By default, children squeeze into one line. flex-wrap controls wrapping:

.container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
}

Available values:

  • nowrap: No wrapping (default)
  • wrap: Wrap
  • wrap-reverse: Reverse wrap

When wrapped, use align-content to control how multiple lines distribute on the cross axis.

align-content: Multi-line Alignment#

Note: This property only works when flex-wrap: wrap and there are multiple lines.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Distribute lines to both ends */
}

Available values are similar to justify-content, but work on the cross axis.

gap: Spacing Control#

The most annoying part of Flexbox used to be spacing - adding margin to each child, then handling first/last element edges. Now we have gap:

.container {
  display: flex;
  gap: 16px; /* Uniform spacing */
}

gap automatically handles edges, no extra spacing at ends. You can also set row and column spacing separately:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px; /* 16px row spacing, 24px column spacing */
}

Practical Examples#

1. Classic Navigation Bar# 

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

Logo on left, menu on right, automatically aligned to both ends.

2. Self-adapting Card Grid# 

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* Minimum 300px, auto-fill */
  max-width: 100%;
}

Cards automatically wrap based on container width, showing as many as possible per row.

3. Vertically Centered Modal# 

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

Two lines of code for vertical and horizontal centering, much cleaner than position: absolute + transform.

Visual Debugging Tool#

Flexbox property combinations can be hard to predict, especially flex-wrap + align-content. I built a visual tool: Flexbox Layout Generator

Key features:

  • Real-time preview of all property combinations
  • One-click CSS code generation
  • Adjustable child count and spacing
  • Visualized main and cross axis directions

When debugging layouts, first adjust in the tool, then copy code to your project - much more efficient than blind CSS writing.

Common Pitfalls#

1. flex-shrink Compressing Elements# 

.item {
  width: 200px;
  /* Default flex-shrink: 1, will be compressed */
}

Solution:

.item {
  flex-shrink: 0; /* Prevent compression */
}

2. min-width Preventing Shrinking# 

.item {
  min-width: auto; /* Default value, may prevent shrinking */
}

Solution:

.item {
  min-width: 0;
}

3. Absolutely Positioned Children Leave Flex Flow# 

.container {
  display: flex;
}
.item {
  position: absolute; /* Not part of Flex layout */
}

Absolutely positioned elements leave the Flex flow and don’t occupy space.

The core of Flexbox is understanding main and cross axes, then choosing appropriate alignment based on layout needs. Practice more and you’ll master it quickly.

Related tools: Grid Layout Generator | CSS Gradient Generator