Flexbox playground

🐸🐸🐸

.pond {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}

Alignment debugger

Main axis →Cross axis ↓

justify-content → main axis; align-items → cross axis.

Pond challenge

Put every frog in the center of its lily pad.

🐸🐸🐸

Property field guide

`justify-content`

Distributes items on the main axis. The main axis follows flex-direction, so row and column swap its orientation.

`align-items`

Aligns every item on the cross axis within its flex line.

`align-content`

Distributes flex lines in a multi-line container created with flex-wrap. It can affect a wrap container even when its contents currently form one line.

`flex`

Combines grow, shrink, and basis on each flex item.