Jenee

CSS Flexbox Playground

Master CSS Flexbox by experimenting with properties visually. Generate the ideal flex layout and copy the resulting CSS code instantly.

Container Properties

Preview
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

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

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

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

How to Use

  1. STEP 1
    Set container properties (e.g., flex-direction) in the left panel
  2. STEP 2
    Click an item to adjust its individual properties (e.g., flex-grow)
  3. STEP 3
    Check layout in preview and copy the code below
  • Flexbox behavior may slighty vary across browsers
  • Designed for modern browsers

Tips

1

Use the 'gap' property to easily exact spacing between items

2

Set 'flex-wrap: wrap' to allow items to wrap onto multiple lines

3

Combine 'align-items: center' and 'justify-content: center' for perfect centering

FAQ

  • Q1

    What is Flexbox?

    A CSS layout module designed for laying out items in one dimension (row or column).

  • Q2

    Gap property not working?

    Older browsers (like old Safari versions) may not support the gap property for flexbox.

  • Q3

    Vertical centering not working?

    Ensure the container has a defined height. Without height, align-items: center won't have effect.

Feedback (Contact)