Flexbox Playground

Experiment with Flexbox properties and see layout changes instantly.

Secure (SSL)

Client-Side Processing

100% Free

Go to tool

Instructions

1

Enter data
Enter content, paste text or load a file from disk.
2

Click the button
The tool will immediately process your data in the browser.
3

Get the result
Copy the finished text or save the file to your device.

                                                function runTool() {

                                                  return "Result ready in 0.1s";

                                                }

➡️ Main Axis: Horizontal

⬇️ Cross Axis (Cross): Vertical

Flexbox Properties

Flex Direction

Justify Content Main Axis

Align Items Cross Axis

Flex Wrap

Show axis tips

Dimensions and Elements

Number of elements 8

Gap 12px

Item size (width/height) 56px

Container width 520px

Container height 280px

Container padding 12px

Align-Self Properties (For one element)

Element #

Align Self

Generated Code

/* Flex container */
.flexbox-demo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  width: 520px;
  height: 280px;
  padding: 12px;
  box-sizing: border-box;
}

/* Demo items */
.flexbox-demo .demo-item {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Highlighted item override */
.flexbox-demo .is-highlight {
  align-self: flex-end;
}

<div class="flexbox-demo">
  <div class="demo-item">1</div>
  <div class="demo-item">2</div>
  <div class="demo-item is-highlight">3</div>
  <div class="demo-item">4</div>
  <div class="demo-item">5</div>
  <div class="demo-item">6</div>
  <div class="demo-item">7</div>
  <div class="demo-item">8</div>
</div>

- Main axis:pozioma (left ↔ right); Transverse axis (cross):pionowa (top ↕ bottom).
- justify-content aligns elements along the main axis.
- align-items ustawia elementy na osi poprzecznej.

Rate this tool:

Related tools

Other tools you may find useful

Flexbox sandbox – all CSS properties in one place

CSS Flexbox is a powerful layout system, but remembering the differences between justify-content and align-items, or when to use flex-grow vs flex-basis can be difficult. The sandbox (playground) allows you to click on properties and see the effect immediately - the best way to learn.

Flexbox sandbox CSS Flexbox playground test Flexbox online flexbox justify align

Flex container properties

Flex Element Properties

order: display order (default 0). flex-grow: growth factor (0 = does not grow, 1 = grows proportionally). flex-shrink: shrink factor (0 = does not shrink). flex-basis: base size before space distribution. Flex abbreviation: flex-grow flex-shrink flex-basis (e.g. flex: 1 1 auto). align-self: Override align-items for a single item.

Common Flexbox patterns

Vertical and horizontal centering: display:flex + justify-content:center + align-items:center. Navigation bar: display:flex + justify-content:space-between. Equal height cards: display:flex + align-items:stretch. Sticky footer: flex-direction:column + main{flex:1}. Auto margin: margin-left:auto moves the element to the right side.

Flexbox vs CSS Grid

Flexbox: 1-dimensional (row or column). Perfect for navigation, toolbars, tabs in a row. Grid: 2-dimensional (rows and columns). Perfect for website layout, gallery grids. You can combine: Grid for the page layout, Flexbox for the interior of the components. There is no "better" - both are complementary.

FAQ

Why are align-items and justify-content confusing?

Justify-content: main axis – depends on flex-direction. At the ditch: horizontally. For column: vertical. Align-items: cross axis – always perpendicular to the main axis. Mnemonics: "justify = main axis", "align = cross axis". The sandbox helps you see this visually.

What does flex: 1 do?

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The element grows to fill the available space. All flex:1 elements are of equal size. flex: 1 1 auto: base size is the natural size of the element (auto), but can grow and shrink.

How to fix elements extending outside the container?

Add flex-wrap: wrap – elements wrap to a new line. Add min-width: 0 on the flex element (prevents long texts from flowing). overflow: hidden on flex element. flex-shrink: 1 (default 1 - element may shrink).

How to center an element absolutely in a flex container?

display: flex + align-items: center + justify-content: center on parent. Alternative without flex: position: absolute + top:50% + left:50% + transform:translate(-50%,-50%). New way (2024): align-content: center on a single element (CSS Box Alignment Level 3).

Does Flexbox work on all browsers?

Yes – full support: Chrome 29+, Firefox 28+, Safari 9+, IE 11 (with prefixes, limited). For IE 11: avoid flex-gap (not supported), shorthand flex may require -ms-. Caniuse.com: flexbox = 99.5% support globally (2024).

Related tools: CSS Grid sandbox, CSS tooltip generator and