Flexbox Playground

An interactive tool to visually learn and test CSS Flexbox properties. Adjust container and item settings while generating Pure CSS, Tailwind CSS, and SCSS code automatically.

How to Use

Adjust Flexbox basic settings with container properties

Add or remove items to see the preview

Set individual item properties

Copy generated CSS, Tailwind, or SCSS code

Key Features

Real-time preview display

Support for all Flexbox properties

Pure CSS, Tailwind CSS, and SCSS code generation

Dynamic item addition and removal

Responsive preview support

Selected Item

3 items

Container Properties

Layout Basics

Display

Flex Direction

Alignment

Justify Content

Align Items

Advanced

Flex Wrap

Align Content

Gap

Item Properties

Item 1

Flex Properties

Flex Grow

Flex Shrink

Flex Basis

Position

Align Self

Order

Preview

Live Preview

Item 1

Selected

Item 2

Item 3

Direction:
row

Justify:
flex-start

Align:
stretch

Wrap:
nowrap

Generated Code

Pure CSS

/* Container Styles */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

/* Item Styles */
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

Frequently Asked Questions

Flexbox is a layout method introduced in CSS3. It provides flexible features for arranging and aligning items within a container, making it ideal for responsive design.

justify-content controls alignment along the main axis, while align-items controls alignment along the cross axis. With flex-direction: row, justify-content affects horizontal alignment and align-items affects vertical alignment.

flex-grow sets the growth rate when filling available space, flex-shrink sets the shrink rate when space is limited, and flex-basis sets the initial size. These can be combined using the flex shorthand property.

Tailwind CSS uses utility classes like flex, flex-row, justify-center, and items-center to implement Flexbox layouts. You can use the class names generated by this tool directly.

Flexbox automatically adjusts item placement based on screen size. Using flex-wrap and flex-direction, you can achieve optimal layouts for different devices.