FLXCSS Flexbox Generator

CSS Flexbox Complete Guide

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system now supported in every modern browser. It eliminates the pain of float-based layouts and makes vertical centering, even spacing, and dynamic sizing trivial. This tool lets you click through property values and instantly see the visual result, then copy the generated CSS.

Flex Container Properties

display: flex — Creating the Flex Context

Declaring display: flex on a parent makes it the flex container; its direct children become flex items.

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

flex-direction — The Main Axis

.container {
  flex-direction: row;            /* default: left to right */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column;         /* top to bottom */
  flex-direction: column-reverse; /* bottom to top */
}

justify-content / align-items — The Core of Alignment

/* justify-content: align along main axis */
.container {
  justify-content: flex-start;    /* pack to start */
  justify-content: center;        /* center */
  justify-content: flex-end;      /* pack to end */
  justify-content: space-between; /* first/last at edges, equal gaps between */
  justify-content: space-around;  /* equal margins on each side */
  justify-content: space-evenly;  /* all gaps equal */
}

/* align-items: align along cross axis */
.container {
  align-items: stretch;    /* default: fill container height */
  align-items: center;     /* vertical center */
  align-items: flex-start; /* top-align */
  align-items: flex-end;   /* bottom-align */
  align-items: baseline;   /* text baseline alignment */
}

Flex Item Properties

flex-grow / flex-shrink / flex-basis

.item {
  flex-grow: 1;    /* proportion of extra space to claim */
  flex-shrink: 1;  /* proportion to shrink when space is tight */
  flex-basis: 0%;  /* initial size before distribution */
}

/* Shorthand */
.item { flex: 1; }    /* 1 1 0% — equal-width siblings */
.item { flex: none; } /* 0 0 auto — fixed size */
.item { flex: auto; } /* 1 1 auto */

/* Practical: sidebar + main */
.sidebar { flex: 0 0 240px; } /* fixed 240px */
.main    { flex: 1; }         /* fill remaining space */

Flexbox vs Grid — When to Use Which

Use Flexbox When

• Aligning navigation bar items
• Button groups and tag lists
• Laying out content inside a card
• Vertical centering with align-items: center
• Handling a dynamic number of items

Use CSS Grid When

• Full-page layout (header, sidebar, main, footer)
• Card grids with a fixed column count
• Controlling rows and columns simultaneously
• Complex two-dimensional placement

Responsive Layout Patterns

Holy Grail Layout

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

.header, .footer { flex: none; }

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

.sidebar { flex: 0 0 200px; }
.main    { flex: 1; }

/* Stack vertically on mobile */
@media (max-width: 768px) {
  .body { flex-direction: column; }
  .sidebar { flex: none; }
}

Frequently Asked Questions

What is the difference between gap and margin?

gap only creates space between flex items — not on the outer edges of the first or last item. margin applies in all directions including outer edges. Use gap for cleaner internal spacing.

Does flex: 1 guarantee equal widths?

flex: 1 means flex-basis: 0%, so content size is ignored and remaining space is split equally. flex: auto uses flex-basis: auto, meaning content size is the starting point and widths may differ.

What is the simplest way to center vertically with Flexbox?

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

Can I reorder items without changing the HTML?

Yes. The order property changes visual order without touching HTML. Default is 0; lower values appear first. Note that screen readers follow HTML order, so take care with accessibility.

How does Flexbox map to Tailwind CSS?

<div class="flex items-center justify-between gap-4">
  <span class="flex-none">Logo</span>
  <nav class="flex gap-2">...</nav>
  <button class="flex-none">Login</button>
</div>