The Multi-Row Matrix

Hard+50 XP

Mission Briefing

When items wrap, you have multiple lines. You must space these entire lines out evenly inside the 500px tall grid.

The Concept: Multi-line Alignment

align-content aligns a flex container's lines when there is extra space in the cross-axis.

The Objective

  1. Target the #grid.
  2. Set flex-wrap to wrap.
  3. Set align-content to space-between.

Constraints

    cssflexbox
    Live Visual Output
    style.css
    Loading...