CSS Flexbox Playground

Interactive Flexbox playground. Learn, experiment, and copy CSS code instantly.

⌘+C Copy CSS⌘+T Copy Tailwind
1
2
3
4
5
CSS Code
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

.item {
  width: 80px;
  height: 80px;
}

Frequently Asked Questions

Common questions about CSS Flexbox

01

What is CSS Flexbox?

02

What's the difference between flex-direction row and column?

03

What does justify-content do?

04

What does align-items do?

05

When should I use flex-wrap?

06

Is Flexbox supported in all browsers?