🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

LOADING ENGINE...

Justify-content

AI & DATA SCIENCE // justify-content

The justify-content property distributes extra space and aligns flex items along a flex container's main axis, controlling horizontal alignment in a row-direction container.

Syntax

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

Deep Dive Course

flex-start, the default, packs items toward the start of the main axis, flex-end packs them toward the end, and center centers them as a group — space-between distributes items with equal space between them but none at the outer edges, space-around gives each item equal space on both sides, making edge gaps effectively half the size of between-item gaps, and space-evenly distributes truly equal space everywhere, including the outer edges. justify-content only has a visible effect when there's genuinely leftover space along the main axis after accounting for all items' sizes — if items already fill the container completely, or overflow it, justify-content has nothing meaningful left to distribute.

1Understanding Justify-content

flex-start, the default, packs items toward the start of the main axis, flex-end packs them toward the end, and center centers them as a group — space-between distributes items with equal space between them but none at the outer edges, space-around gives each item equal space on both sides, making edge gaps effectively half the size of between-item gaps, and space-evenly distributes truly equal space everywhere, including the outer edges. justify-content only has a visible effect when there's genuinely leftover space along the main axis after accounting for all items' sizes — if items already fill the container completely, or overflow it, justify-content has nothing meaningful left to distribute.

💡

justify-content only produces a visible effect when flex items don't already fill the entire main axis — if the items' combined size equals or exceeds the container's size, there's no leftover space left for justify-content to actually distribute.

editor.html
.navbar {
  display: flex;
  justify-content: space-between;
}
localhost:3000

2Practical Example

Here is a real-world application of Justify-content showing how it is used in production CSS code.

editor.html
.button-group {
  display: flex;
  justify-content: center;
}
localhost:3000

3Best Practices

Follow these guidelines when working with Justify-content:

1. Use space-between for evenly-spaced navigation items or similar layouts where edge items should sit flush against the container's boundaries

2. Use space-evenly instead of space-around when you specifically want the outer edge gaps to visually match the between-item gaps exactly, rather than being half their size

3. Remember justify-content has no visible effect if flex items already collectively fill, or overflow, the container's main axis, since there's no leftover space to distribute

⚠️

Tip: justify-content only produces a visible effect when flex items don't already fill the entire main axis — if the items' combined size equals or exceeds the container's size, there's no leftover space left for justify-content to actually distribute.

editor.html
.navbar {
  display: flex;
  justify-content: space-between;
}
localhost:3000

Examples

Example 01Basic Usage
.navbar {
  display: flex;
  justify-content: space-between;
}
Example 02Advanced Example
.button-group {
  display: flex;
  justify-content: center;
}

Best Practices

  • Use space-between for evenly-spaced navigation items or similar layouts where edge items should sit flush against the container's boundaries
  • Use space-evenly instead of space-around when you specifically want the outer edge gaps to visually match the between-item gaps exactly, rather than being half their size
  • Remember justify-content has no visible effect if flex items already collectively fill, or overflow, the container's main axis, since there's no leftover space to distribute

Interview Question

Why does space-around leave a visually smaller gap at the container's outer edges compared to the gaps between individual items, while space-evenly makes every gap, including the edges, exactly equal?

Hint: Think about exactly how each value calculates and distributes each item's share of the leftover space — as space fully surrounding each item individually, or as space split evenly among every gap position, edges included.

space-around gives each individual flex item an equal amount of space on both of its own sides, meaning each item effectively gets its own full margin-equivalent portion of space to its left and right — but two adjacent items each contribute their own adjacent half-portions of space between them, which combine to form one full-sized gap between items, while the outermost edges only receive one single item's own half-portion of space, with no neighboring item on that outer side to contribute a matching second half. This is exactly why space-around's edge gaps visually appear to be half the size of its between-item gaps, since the edges are structurally only getting one contributing half-portion instead of two combined halves. space-evenly, by contrast, doesn't calculate space on a per-item basis at all, it instead divides the total leftover space into equal-sized gaps positioned at every single gap location around and between all the items uniformly, including the two outer edges, which is precisely why every gap, edges included, ends up exactly equal under space-evenly, unlike the intentionally different edge-versus-between sizing that space-around's per-item calculation method produces.

Exercises

MediumPractice using Justify-content in a real scenario.
View Solution
.navbar {
  display: flex;
  justify-content: space-between;
}

Frequently Asked Questions

Why does space-around leave a visually smaller gap at the container's outer edges compared to the gaps between individual items, while space-evenly makes every gap, including the edges, exactly equal?

space-around gives each individual flex item an equal amount of space on both of its own sides, meaning each item effectively gets its own full margin-equivalent portion of space to its left and right — but two adjacent items each contribute their own adjacent half-portions of space between them, which combine to form one full-sized gap between items, while the outermost edges only receive one single item's own half-portion of space, with no neighboring item on that outer side to contribute a matching second half. This is exactly why space-around's edge gaps visually appear to be half the size of its between-item gaps, since the edges are structurally only getting one contributing half-portion instead of two combined halves. space-evenly, by contrast, doesn't calculate space on a per-item basis at all, it instead divides the total leftover space into equal-sized gaps positioned at every single gap location around and between all the items uniformly, including the two outer edges, which is precisely why every gap, edges included, ends up exactly equal under space-evenly, unlike the intentionally different edge-versus-between sizing that space-around's per-item calculation method produces.

Related Functions

Align-itemsFlex-directionDisplay-flex