Bird
Raised Fist0
CSSmarkup~5 mins

Justify content in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Justify content helps you control how items line up horizontally inside a container. It makes your page look neat and balanced.

When you want to spread buttons evenly across a toolbar.
When you need to center a group of images in a row.
When you want space between text blocks in a navigation menu.
When you want items to stick to the left or right side of a box.
When you want to create equal gaps between cards in a gallery.
Syntax
CSS
.container {
  display: flex;
  justify-content: value;
}

You must set display: flex; or display: grid; on the container first.

The value controls how items align horizontally.

Examples
Items align to the left side (start) of the container.
CSS
.container {
  display: flex;
  justify-content: flex-start;
}
Items are centered horizontally inside the container.
CSS
.container {
  display: flex;
  justify-content: center;
}
Items spread out with equal space between them, edges align with container sides.
CSS
.container {
  display: flex;
  justify-content: space-between;
}
Items have equal space around them, including edges.
CSS
.container {
  display: flex;
  justify-content: space-around;
}
Sample Program

This example shows three blue boxes spaced evenly across a gray container using justify-content: space-between;. The boxes appear at the left, center, and right with equal space between them.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Justify Content Example</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      background-color: #f0f0f0;
      padding: 1rem;
      border: 2px solid #ccc;
      max-width: 600px;
      margin: 2rem auto;
    }
    .box {
      background-color: #4a90e2;
      color: white;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      font-weight: bold;
      user-select: none;
    }
  </style>
</head>
<body>
  <section class="container" aria-label="Justify content example">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

If you use justify-content without display: flex or display: grid, it won't work.

Try changing the justify-content value in the sample to see how the layout changes.

Use browser DevTools (right-click > Inspect) to experiment with justify-content live on any page.

Summary

Justify content controls horizontal alignment of items inside a flex or grid container.

Common values: flex-start, center, space-between, space-around.

It helps make layouts look balanced and organized.

Practice

(1/5)
1. What does the CSS property justify-content control in a flex container?
easy
A. The vertical alignment of items inside the container
B. The horizontal alignment of items inside the container
C. The size of the container
D. The color of the items

Solution

  1. Step 1: Understand the role of justify-content

    This property controls how items are aligned horizontally inside a flex or grid container.

  2. Step 2: Differentiate from vertical alignment

    Vertical alignment is controlled by align-items, not justify-content.

  3. Final Answer:

    The horizontal alignment of items inside the container -> Option B

  4. Quick Check:

    Justify content = horizontal alignment [OK]
Hint: Justify content aligns items left to right [OK]
Common Mistakes:
  • Confusing justify-content with align-items
  • Thinking it changes item size
  • Assuming it controls colors
2. Which of the following is the correct syntax to center items horizontally using justify-content in a flex container?
easy
A. justify-content: center-items;
B. justify-content: middle;
C. justify-content: align-center;
D. justify-content: center;

Solution

  1. Step 1: Recall valid values for justify-content

    Common valid values include flex-start, center, space-between, and space-around.

  2. Step 2: Identify the correct syntax for centering

    The correct value to center items horizontally is center, so the syntax is justify-content: center;.

  3. Final Answer:

    justify-content: center; -> Option D

  4. Quick Check:

    Centering uses 'center' value [OK]
Hint: Use 'center' exactly to center items [OK]
Common Mistakes:
  • Using invalid values like 'middle' or 'align-center'
  • Missing the colon or semicolon
  • Confusing with align-items syntax
3. Given this CSS and HTML, what will be the horizontal spacing of the items inside the container?
div.container {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
medium
A. Items are grouped together on the left
B. Items are centered with equal space around them
C. Items are evenly spaced with equal space between them
D. Items are aligned to the right

Solution

  1. Step 1: Understand justify-content: space-between;

    This value places the first item at the start, the last item at the end, and evenly distributes space between the items.

  2. Step 2: Visualize the layout

    With three items, the spaces between them are equal, but no extra space is added at the container edges.

  3. Final Answer:

    Items are evenly spaced with equal space between them -> Option C

  4. Quick Check:

    Space-between = equal gaps between items [OK]
Hint: Space-between puts equal gaps only between items [OK]
Common Mistakes:
  • Thinking space-between adds space around edges
  • Confusing with space-around or center
  • Assuming items cluster on one side
4. Identify the error in this CSS code that prevents justify-content from working:
div.container {
  display: block;
  justify-content: center;
}
medium
A. The container must have display: flex; or display: grid; for justify-content to work
B. The property name should be justify-items instead
C. The value 'center' is invalid for justify-content
D. The container needs a fixed width

Solution

  1. Step 1: Check the display property

    justify-content only works on flex or grid containers, but here display is set to block.

  2. Step 2: Understand the requirement for flex/grid

    Without display: flex; or display: grid;, justify-content has no effect.

  3. Final Answer:

    The container must have display: flex; or display: grid; for justify-content to work -> Option A

  4. Quick Check:

    Justify-content needs flex or grid [OK]
Hint: Use flex or grid display for justify-content to work [OK]
Common Mistakes:
  • Using justify-content on block containers
  • Confusing justify-content with justify-items
  • Thinking value 'center' is invalid
5. You want to create a navigation bar with 4 links spaced evenly across the width, but with equal space around each link (including edges). Which justify-content value should you use in your flex container?
hard
A. space-around
B. flex-start
C. center
D. space-between

Solution

  1. Step 1: Understand the difference between space-between and space-around

    space-between puts equal space only between items, no space at edges. space-around adds equal space around each item, including edges.

  2. Step 2: Match requirement to property value

    Since the requirement is equal space around each link including edges, space-around is the correct choice.

  3. Final Answer:

    space-around -> Option A

  4. Quick Check:

    Space-around = equal space around all items [OK]
Hint: Use space-around for equal space including edges [OK]
Common Mistakes:
  • Choosing space-between which skips edges
  • Using center which groups items
  • Using flex-start which aligns left only