EasyCode365EasyCode365

Interactive Lesson: CSS Flexbox

This lesson is focused on practice.

You already learned the basic Flexbox properties. Here you will change them in small, focused steps and watch how the flex items move. Each playground below isolates one idea, so you can learn it on its own before combining everything.

Direction and wrapping

flex-direction sets the main axis (row or column), and flex-wrap decides whether items stay on one line or move onto new lines.

flex-direction · flex-wrap

Switch the main axis and toggle wrapping. Watch the items reorder and the line breaks change.

1
2
3
4
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Row alignment

In a row, justify-content moves items horizontally, while align-items and align-content work vertically.

justify-content · align-items · align-content

The container uses flex-direction: row. Watch horizontal and vertical alignment separately.

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Column alignment

In a column, the axes switch: justify-content works vertically, while align-items and align-content work horizontally.

justify-content · align-items · align-content

The container uses flex-direction: column. Watch how the same controls now move items on switched axes.

1
2
3
.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

Spacing and item size

gap adds space between items, and the flex shorthand controls how each item grows or shrinks to share the available space.

gap · Item flex

Change the gap and how each item flexes. Watch the spacing and how items share the row.

1
2
3
.flex-container {
  display: flex;
  gap: 12px;
}

.flex-item {
  flex: 0 0 64px;
}

Put it all together

Now combine every property in one playground and read the full CSS it produces.

Flexbox playground

1
2
3
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  background-color: #f1f5f9;
}

.flex-item {
  flex: 0 0 64px;
}