Alignment, Justification, and axes

Like Grid, Flexbox allow us to modify the alignment and justification of their direct children.

There is a lot of similarity between how they work, with enough differences to confuse you when you’re switching contexts between one and the other.

Alignment and justification

Just like with Grid, we have alignment and justification with Flexbox. The big difference is, they don’t work based on the two axes of the flex container.

The main-axis
The cross-axis

By default, the main-axis is horizontal, and the cross-axis is vertical.

We use justification for the main axis. By default, this is start, which essentially means “line up at the ‘start’ of the main axis.”

In the example below, we can see how all the elements have lined up at the “start” of the horizontal axis, leaving empty space within the parent.

The default alignment on the cross-axis is called stretch, which means that all elements stretch to match the height of the parent. We use the alignment properties on the cross-axis.

Most of the time, you won’t have a declared height, so the tallest sibling defines the height, and the others “stretch” to match that height. You can select one of the elements and give it a larger height, or add more content to one, and you will see the siblings stretch in height to match.

We can change how the elements are aligned on the main axis using justify-content, and on the cross axis using align-items.

Both of them work similarly to how their Grid equivilants work, but unlike with Grid, the most common ones you’ll use are:

justify-content: space-between
justify-content: center
align-items: center

With Grid, we rarely use justify-content because our columns usually fill up the entire width of the grid container. With Flexbox, a lot of the time there is leftover space inside the container, and we want to distribute that space.

Navbars are one of the most common usecases for Flexbox. It’s a little strange that our project doesn’t have one, so let’s add one in!

Updated design

The logo

(right click to download)

Starting code

If you fell behind or skipped the earlier lessons, you can use this starting code, or the 05-alignment-justification-and-axes folder from this GitHub repo.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn Chess the right way</title>
<link href="styles/style.css" rel="stylesheet">
</head>

<body>
<main>

<section class="hero">
  <div class="wrapper">
    <div class="hero-content">
      <h1><span>Books hard to follow? YouTube letting you down?</span> Learn Chess the right way.</h1>
      <p class="lede">Chess shouldn't feel like memorizing endless opening variations or sifting through amateur
        videos
        with confusing
        explanations. Our structured approach breaks down complex strategies into clear, progressive steps with
        expert
        instruction and personalized feedback. <strong>Stop wasting time with scattered resources and start
          mastering
          real
          chess
          today</strong>. </p>
      <button class="button">Start learning today!</button>
    </div>
</section>

<section>
  <div class="wrapper">
    <h2>Start your journey to grandmaster today</h2>

    <div class="three-columns">
      <div>
        <h3>Learn the Right Way, in the Right Order</h3>
        <p>Our curriculum follows proven chess pedagogy, building from fundamentals to advanced strategy. Each
          lesson
          connects
          naturally to the next, so you always know what to study. </p>
      </div>
      <div>
        <h3>Train with Expert Instructors</h3>
        <p>Learn from titled players who break down complex concepts into clear insights. Understand not just what
          to
          do,
          but
          why it works.</p>
      </div>
      <div>
        <h3>Track Your Progress with Precision</h3>
        <p>Detailed analytics identify your strengths and weaknesses, then adapt your training to focus on what
          matters
          most
          for your improvement.</p>
      </div>
    </div>
  </div>
</section>
</main>

<footer class="page-footer">
<div class="wrapper">
  <div class="page-footer-content">
    <h2>Ready to Improve Your Chess?</h2>
    <p>Join thousands of students who are already leveling up their game. Start your first lesson today—it's free to
      get
      started!. <a href="instructor.html">Start learning today!</a></p>
  </div>
</div>
</footer>
</body>

</html>

CSS

@font-face {
font-family: "Overlock";
src: local("Overlock"), url("../fonts/Overlock-Regular.ttf");
}

@font-face {
font-family: "Overlock";
src: local("Overlock Bold"), url("../fonts/Overlock-Bold.ttf");
font-weight: bold;
}

:root {
--clr-accent-300: hsl(39 94% 57%);
--clr-accent-400: hsl(39 100% 41%);

--clr-neutral-100: hsl(0 0% 100%);
--clr-neutral-800: hsl(0 0% 20%);

--fs-400: 1.125rem;
--fs-500: 1.3125rem;
--fs-600: 1.5rem;
--fs-700: 2.25rem;
--fs-800: 3rem;

--ff-base: system-ui, sans-serif;
--ff-accent: Overlock, serif;
}

* {
box-sizing: border-box;
}

body {
color: var(--clr-neutral-800);
font-size: var(--fs-400);
font-family: var(--ff-base);
line-height: 1.6;
margin: 0;
}

h1,
h2 {
color: var(--clr-accent-400);
font-family: var(--ff-accent);
line-height: 1.1;
}

h1 {
font-size: var(--fs-800);
}

h1 span {
display: block;
font-size: 0.75em;
font-weight: lighter;
color: var(--clr-neutral-800);
}

h2 {
font-size: var(--fs-700);
}

h3 {
font-size: var(--fs-600);
}

a {
color: var(--clr-accent-400);
}

a:hover,
a:focus-visible {
color: inherit;
}

.button {
font: inherit;
font-weight: 700;
text-transform: uppercase;
background: var(--clr-accent-300);
border: 0;
padding: 0.75em 1.5em;
}

.button:hover,
.button:focus-visible {
background: var(--clr-neutral-800);
color: var(--clr-accent-300);
}

.lede {
font-size: var(--fs-500);
}

.wrapper {
max-inline-size: 900px;
margin-inline: auto;
padding-inline: 1rem;
}

.three-columns {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-block: 100px;
background-image: url(../images/chess-bg.jpg);
background-size: cover;
}

.hero-content {
text-align: center;
background: hsl(0 0% 100% / 0.8);
padding: 40px;
}

.hero-content > :first-child {
margin-block-start: 0;
}

.hero-content > :last-child {
margin-block-end: 0;
}

.page-footer {
text-align: center;
background-image: linear-gradient(#444, #000);
color: var(--clr-neutral-100);
padding: 50px;
}

The main-axis and cross-axis

Where things get confusing is when we change the direction of the main-axis using flex-direction, where we have two values that we can pick:

row: the default value
column: changes the direction of the main axis to be a column

See the Pen Flexbox visualizer by Kevin (@kevinpowell) on CodePen.

There is no `justify-items` with Flexbox

If you look at how Flexbox works, the concept of justify-items doesn’t work, since the elements are controlling their own size. With Grid, the cell can be bigger than the element on both the vertical and horizontal axis at the same time. With Flexbox, that can only happen on the cross-axis.

Alignment, Justification, and axes

Alignment and justification

The main-axis and cross-axis

There is no justify-items with Flexbox

There is no `justify-items` with Flexbox