MicroLearn
Back to Course Map

Mission 5: Cargo Bay Optimization

The cargo containers in the hold are just stacked on top of each other. We need to engage the Flexbox protocol to align them properly.

00:00

Step 1 / 3

System Briefing: The Flexible Layout Protocol

Technician, the cargo hold of the U.S.S. Packhorse is a mess. Traditional layout methods are too rigid for modern dynamic cargo. We need a one-dimensional layout model that offers powerful alignment and space distribution capabilities: Flexbox.

Activating Flexbox

The journey begins by declaring a container as a flex container. This immediately changes how its direct children (flex items) are rendered.

.container {
  display: flex;
}

Controlling the Main Axis: justify-content

This property defines how flex items are aligned along the main axis (horizontally, by default). It's your primary tool for distributing space.

  • flex-start (default): Items are packed toward the start.
  • flex-end: Items are packed toward the end.
  • center: Items are centered along the line.
  • space-between: Items are evenly distributed; the first item is on the start line, the last on the end line.
  • space-around: Items are evenly distributed with equal space around them.
  • space-evenly: Items are distributed so that the spacing between any two items is equal.
Controlling the Cross Axis: align-items

This property defines how flex items are aligned along the cross axis (vertically, by default).

  • stretch (default): Items stretch to fill the container.
  • flex-start: Items are placed at the start of the cross axis.
  • flex-end: Items are placed at the end of the cross axis.
  • center: Items are centered in the cross-axis.
Handling Overflow: flex-wrap

By default, flex items will try to fit onto one line. The flex-wrap property allows items to wrap onto multiple lines as needed.

  • nowrap (default): All flex items will be on one line.
  • wrap: Flex items will wrap onto multiple lines, from top to bottom.

Editor