Search⌘ K
AI Features
Home
Courses
Modern CSS Layout: Decking Zombies with Style

justify-content, align-items, and align-content Properties

Explore how to use justify-content, align-items, and align-content properties to control the distribution and alignment of items within Flexbox containers. Understand main-axis and cross-axis spacing, try different values, and improve your ability to create dynamic and adaptable CSS layouts.

We'll cover the following...

Just try and justify the apocalypse

justify-content: This determines how the content is distributed across the main-axis that you’ve chosen (horizontal for rows, vertical for columns).

.undead-parent {
    justify-content: center;
}

justify-content can have the following values:

  • center: This puts the items in the center of the row or column.
  • flex-start: This bunches the items at the left or top.
  • flex-end: This bunches the items at the right or bottom.
  • space-around: This makes sure there’s equal space on the right and left (or top and bottom) of each
...