Justify-content – HTML & CSS - Mastery

🧑‍⚖️ Justify Content

The justify-content property controls how flex items are aligned along the main axis — the direction items are laid out (row, column, etc.).

👉 It deals with horizontal spacing in row direction, and vertical spacing in column direction.

🧭 Main Axis Reminder

flex-direction: row → main axis is horizontal
flex-direction: column → main axis is vertical

justify-content affects item distribution and spacing along the main axis.

Master code block to be used further:

<style>
   /*All the changes are made here further*/
    .flex-container {
      display: flex;
      background-color: lightgrey;
      padding: 10px;
    }
    .flex-item {
      background: steelblue;
      color: white;
      margin: 5px;
      padding: 20px;
      text-align: center;
    }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

🧱 Syntax

justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

🔹 Property Values Explained

🔸 flex-start (default)

Items align at the start of the main axis.

.flex-container {
	display: flex;
	justify-content: flex-start;
}

🔸 center

Items are centered along the main axis.

.flex-container {
  display: flex;
  justify-content: center;
}

🔸 flex-end

Items align at the end of the main axis.

.flex-container {
  display: flex;
  justify-content: flex-end;
}

🔸 space-between

First item is at start, last at end, space between items.

.flex-container {
  display: flex;
  justify-content: space-between;
}

🔸 space-around

Equal space around items (left + right).
So, items have more space between them than at ends.

.flex-container {
  display: flex;
  justify-content: space-around;
}

🔸 space-evenly

Equal space between items and at the ends.

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

Try applying all justify-content property values while using flex-direction: column.

🧱 Justify-Content Playground

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Justify Content Playground</title>
<style>
  .infographic-justifycontent {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-justifycontent[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-inner { padding: 0.5rem; }
  .ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }

  .ha-code {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.8rem 1.8rem 0.8rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: #e5e5e5;
    overflow-x: auto;
  }
  .ha-code .ha-prop { color: #c586c0; }
  .ha-code .ha-val-hl { color: #ffd166; font-weight: 700; }
  .ha-code .ha-sel { color: #f472b6; font-weight: 700; }

  .ha-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .ha-pill {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.42rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ha-pill:hover { border-color: var(--accent); }
  .ha-pill.ha-on { background: var(--accent); border-color: var(--accent); color: #fff; }

  .ha-toggle {
    display: flex;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0.25rem;
  }
  .ha-toggle button {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .ha-toggle button.ha-on { background: var(--accent); color: #fff; }

  .ha-stage {
    background: lightgrey;
    border-radius: 10px;
    padding: 14px;
    min-height: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: height 0.3s ease;
  }
  .ha-stage.ha-col { height: 320px; align-items: stretch; justify-content: flex-start; }
  .ha-stage.ha-col .ha-flex-item { width: 100%; }
  .ha-flex-item {
    background: steelblue;
    color: white;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
  }
  .ha-flex-item.ha-first { box-shadow: 0 0 0 3px #ffd166; }

  .ha-note {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
</style>
</head>
<body>

<div class="infographic-justifycontent" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code" id="code-out"></div>

      <div class="ha-toggle">
        <button class="ha-on" id="btn-row">flex-direction: row</button>
        <button id="btn-column">flex-direction: column</button>
      </div>

      <div class="ha-pills" id="justify-pills">
        <button class="ha-pill ha-on" data-val="flex-start">flex-start</button>
        <button class="ha-pill" data-val="center">center</button>
        <button class="ha-pill" data-val="flex-end">flex-end</button>
        <button class="ha-pill" data-val="space-between">space-between</button>
        <button class="ha-pill" data-val="space-around">space-around</button>
        <button class="ha-pill" data-val="space-evenly">space-evenly</button>
      </div>

      <div class="ha-stage" id="stage">
        <div class="ha-flex-item ha-first">1</div>
        <div class="ha-flex-item">2</div>
        <div class="ha-flex-item">3</div>
      </div>

      <div class="ha-note" id="note-out"></div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const stage = document.getElementById('stage');
  const codeOut = document.getElementById('code-out');
  const note = document.getElementById('note-out');
  const items = Array.from(stage.querySelectorAll('.ha-flex-item'));
  const btnRow = document.getElementById('btn-row');
  const btnColumn = document.getElementById('btn-column');

  let direction = 'row';
  let justify = 'flex-start';

  const notesRow = {
    'flex-start': 'Items pack toward the start of the row, leaving all the leftover space at the end.',
    'center': 'Items bunch together in the middle, with equal empty space on both sides.',
    'flex-end': 'Items pack toward the end of the row, leaving all the leftover space at the start.',
    'space-between': 'The first and last items touch the edges, and the leftover space is split evenly between the items in the middle.',
    'space-around': 'Each item gets equal space on both its sides — so the gaps between items end up twice as wide as the gaps at the edges.',
    'space-evenly': 'Every gap — including the two at the edges — ends up exactly equal.'
  };
  const notesColumn = {
    'flex-start': 'With flex-direction: column, the main axis is now vertical — items pack toward the TOP instead of the left.',
    'center': 'Items bunch together in the vertical middle, with equal empty space above and below.',
    'flex-end': 'Items pack toward the BOTTOM now, since the main axis rotated 90°.',
    'space-between': 'The first and last items touch the top and bottom edges; leftover vertical space splits evenly between the middle items.',
    'space-around': 'Each item gets equal space above and below it — so gaps between items are twice as tall as the gaps at the top/bottom edges.',
    'space-evenly': 'Every vertical gap — edges included — ends up exactly equal.'
  };

  function currentNotes() {
    return direction === 'row' ? notesRow : notesColumn;
  }

  function animateChange() {
    const firstRects = items.map(el => el.getBoundingClientRect());

    stage.classList.toggle('ha-col', direction === 'column');
    stage.style.flexDirection = direction;
    stage.style.justifyContent = justify;
    void stage.offsetHeight;

    const lastRects = items.map(el => el.getBoundingClientRect());

    items.forEach((el, i) => {
      const dx = firstRects[i].left - lastRects[i].left;
      const dy = firstRects[i].top - lastRects[i].top;
      el.style.transition = 'none';
      el.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
    });

    requestAnimationFrame(() => {
      items.forEach(el => {
        el.style.transition = 'transform 0.45s cubic-bezier(0.22, 1, 0.36, 1)';
        el.style.transform = 'translate(0, 0)';
      });
    });

    codeOut.innerHTML = '<span class="ha-sel">.flex-container</span> {\n  ' +
      '<span class="ha-prop">display</span>: flex;\n  ' +
      '<span class="ha-prop">flex-direction</span>: <span class="ha-val-hl">' + direction + '</span>;\n  ' +
      '<span class="ha-prop">justify-content</span>: <span class="ha-val-hl">' + justify + '</span>;\n}';
    note.textContent = currentNotes()[justify];
  }

  btnRow.addEventListener('click', () => {
    if (direction === 'row') return;
    direction = 'row';
    btnRow.classList.add('ha-on');
    btnColumn.classList.remove('ha-on');
    animateChange();
  });
  btnColumn.addEventListener('click', () => {
    if (direction === 'column') return;
    direction = 'column';
    btnColumn.classList.add('ha-on');
    btnRow.classList.remove('ha-on');
    animateChange();
  });

  document.getElementById('justify-pills').querySelectorAll('.ha-pill').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.ha-pill').forEach(p => p.classList.remove('ha-on'));
      btn.classList.add('ha-on');
      justify = btn.getAttribute('data-val');
      animateChange();
    });
  });

  animateChange();
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

✅ Summary

justify-content aligns items horizontally or vertically, based on the main axis.
Use it to center, push, or space items across the layout.
Try combining it with flex-direction and align-items for full control.