Loading…

How to use Flexbox Generator

Set flex-direction, justify-content, align-items, wrap and gap using dropdowns, watch the item preview rearrange live, and copy the generated flex container CSS.

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (the flex direction), while align-items aligns them on the cross axis.

How do I center an element with flexbox?

Set justify-content and align-items both to center on a flex container to perfectly center a child horizontally and vertically.

What does flex-wrap do?

It controls whether items stay on one line or wrap onto multiple lines when they exceed the container width.

More Developer Tools

Grid Generator
Visual grid layout + CSS code.
Animation Generator
Generate keyframes with preview.
Meta Tags Advanced
SEO + OG + Twitter meta generator.
Slugify
Convert any text into a clean URL slug — strips accents, lowercases and joins words with a custom separator.
Case Converter (Dev)
Convert identifiers between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Title and Sentence case.
Bytes Humanizer
Turn raw byte counts into human-readable sizes in KiB/MiB (binary) or KB/MB (decimal), and parse sizes back to bytes.
Number Formatter
Format numbers with locale-aware thousands separators and fixed decimals using the Intl API — US, EU, Indian and more.
Base64URL Encoder
Encode or decode UTF-8 text to URL-safe Base64 (base64url) with no padding — ideal for JWTs and query parameters.
JWT Generator (HS256)
Sign a JSON Web Token with HMAC-SHA256 from your header, payload and secret — output verifiable against jwt.io.
URL Encoder / Decoder
Percent-encode or decode text for URLs using encodeURIComponent or encodeURI, in both full-string and component modes.
JSON to Query String
Convert a JSON object into a URL query string with bracket notation for nested objects and arrays, fully percent-encoded.
Duration Humanizer
Convert milliseconds or seconds into a readable duration like 1d 2h 3m 4s, and break it down across every time unit.

← View all Developer ToolsBrowse all 1,100+ tools →