Daily Task Tool LogoDaily Task Tool

Retro Flexbox Playground

Back to Home

Preset Playgrounds

Container Options

Child Items (4/8)

Edit Item: Mario

Interactive Screen Preview

Click individual sprite boxes inside the container screen to adjust their properties.

1. Mario
G:0 S:1 O:0
2. Ash
G:0 S:1 O:0
3. Bulbasaur
G:0 S:1 O:0
4. Charmander
G:0 S:1 O:0
AXIS: ROW | WRAP: NOWRAP

Generated CSS Code

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  height: 200px;
}

Flexbox Cheat Sheet & Visual Guide

Main Axis vs Cross Axis

Flexbox is **one-dimensional**. Space is distributed along the **Main Axis** (set by `flex-direction`). The **Cross Axis** runs perpendicular to it.

  • **row**: Main is horizontal (left to right). Cross is vertical.
  • **column**: Main is vertical (top to bottom). Cross is horizontal.
  • **justify-content**: Controls alignment along the **Main Axis**.
  • **align-items**: Controls alignment along the **Cross Axis** for all items.

Child properties

Individual items inside the container can be sized and positioned independently:

  • **flex-grow**: Ratio of how much extra space this item receives if the container has remaining space (default: 0).
  • **flex-shrink**: Ratio of how much this item shrinks relative to siblings when space is tight (default: 1).
  • **order**: Moves the item visually earlier or later on the axis without changing DOM structure (default: 0).
  • **align-self**: Overrides the parent container's `align-items` setting for this single item.