HomeToolsFlexbox

CSS WORKSPACE

Flexbox

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Flexbox Playground

Container Properties
16px
Item 1 Properties
0
1
0
PREVIEW
1
2
3
CONTAINER CSS
css
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 16px;
ITEM CSS
css
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  order: 0;
  align-self: auto;
}
A PRACTICAL GUIDE

Choose the right axis for your layout

Flexbox arranges children along a main axis, making it a useful choice for navigation, action rows, and groups of flexible cards. The direction changes which axis justify-content controls. Understanding that relationship makes the controls more useful than memorizing individual settings.

How to use this tool

  1. Set flex-direction to row or column. With row, the main axis is horizontal; with column, it is vertical.
  2. Use justify-content for the main axis and align-items for the cross axis. Turn on wrapping when a row should break onto another line.
  3. Apply the container CSS to the parent and any item rules to its direct children. Test the widest label and smallest supported screen.

Each button starts with a 160-pixel preferred basis and can grow or shrink. Wrapping lets the group move onto more lines when space is limited. Gap keeps the spacing predictable without adding margins to individual items.

Read the reference documentation ↗
Example to try in your project
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.actions > button { flex: 1 1 160px; }

Before you ship

Do not use visual reordering to hide a confusing document order. Keyboard navigation and screen readers follow the underlying markup. Long text may also need min-width: 0 on a flexible child.

Explore a related tool