b2KIT

CSS Flexbox Playground

Experiment with Flexbox properties visually and copy the generated CSS code.

Container Properties

CSS Code
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

Part of the upcoming MAPb2 suite -- Visual Thinking Tools

How to Use CSS Flexbox Playground

  1. 1

    Set container properties

    Adjust flex-direction, justify-content, align-items, and wrap.

  2. 2

    Configure flex items

    Set flex-grow, flex-shrink, and flex-basis on individual items.

  3. 3

    See live preview

    Watch the layout update in real time as you change values.

  4. 4

    Copy the CSS

    Click copy to grab the flexbox CSS for your stylesheet.

Related Tools

JSON Formatter & Validator

Format, validate, and beautify JSON with syntax highlighting and error detection.

Base64 Encoder / Decoder

Encode text or files to Base64 and decode Base64 strings back to their original form.

SQL Formatter & Beautifier

Format and indent SQL queries for better readability across all major dialects.

HTML to Markdown Converter

Convert HTML markup into clean Markdown syntax with support for tables and lists.

Markdown to HTML Live Preview

Write Markdown and see the rendered HTML output in real time with live preview.

Diff / Patch Viewer

Visualize unified diffs and patch files with color-coded additions and deletions.