Text & String

Word Counter Case Converter String Reverse Duplicate Line Remover Sort Lines Text Diff Checker Lorem Ipsum Generator Slug Generator Text Repeater

Web / HTML

HTML Encoder/Decoder URL Encoder/Decoder HTML Formatter HTML Minifier HTML to Markdown Markdown to HTML Meta Tag Generator OG Tag Generator Robots.txt Generator .htaccess Generator Favicon Generator

CSS Tools

CSS Formatter CSS Minifier Box Shadow Generator Border Radius Generator Gradient Generator Flexbox Visualizer Grid Generator px ↔ rem Converter CSS Specificity Calc

JS & JSON

JS Formatter JS Minifier JSON Formatter JSON to CSV JSON to XML JSON Path Tester

Encode & Hash

Base64 Encoder/Decoder URL-Safe Base64 MD5 Hash Generator SHA Hash Generator HMAC Generator BCrypt Hash Generator JWT Decoder Password Generator Password Strength File Hash Generator

Generators

UUID Generator Nano ID Generator Random String Generator QR Code Generator Barcode Generator

Date & Time

Unix Timestamp Date Difference Timezone Converter Cron Builder

Color Tools

Color Picker Palette Generator Contrast Checker Tint & Shade Image Color Extractor

Regex & Testing

Regex Tester Diff Checker cURL Generator HTTP Status Codes MIME Type Lookup

Number & Math

Number Base Converter Roman Numeral Converter Random Number Generator Percentage Calculator Ratio Calculator

Miscellaneous

IP Lookup DNS Lookup SSL Checker Word Frequency CSV Table Viewer CSV to JSON XML Formatter YAML to JSON JSON to YAML SVG Optimizer
79 free tools · no sign-up required
Browse all tools
CSS Tools

Flexbox Visualizer

Visualize CSS Flexbox properties interactively. Adjust flex-direction, justify-content, align-items, and more — see live results and copy the generated CSS.

Free Client-Side No Sign-Up Nothing Stored
Container Properties
flex-direction
justify-content
align-items
flex-wrap
align-content
gap (px)
Item Properties
Count
flex-grow
flex-shrink
flex-basis px
Generated CSS

What This Tool Does

Visualise CSS Flexbox layout properties interactively. Adjust all container properties (flex-direction, justify-content, align-items, flex-wrap, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, count) with live preview. The generated CSS updates instantly.

Frequently Asked Questions

What is Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space and aligns items in a container along a main axis (row or column). It is ideal for navigation bars, card rows, centering elements, and any single-direction layout.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (horizontal in row, vertical in column). align-items controls alignment along the cross axis (perpendicular to the main axis). Think of justify as the primary direction and align as the secondary direction.
When should I use Flexbox vs Grid?
Use Flexbox for one-dimensional layouts — rows OR columns. Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously. In practice, many layouts combine both: Grid for page structure, Flexbox for component internals.