Both set the alignment of the content.
1. justify-content: along primary axis
(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children horizontally left
flex-end; Align children horizontally right
center; Align children horizontally centered (amaze!)
space-between; Distribute children horizontally evenly across entire width
space-around; Distribute children horizontally evenly across entire width (but with space on the edges
2. align-items: along secondary axis
(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)
For instance, if flex-direction is row (default):
flex-start; Align children vertically top
flex-end; Align children vertically bottom
center; Align children vertically centered (amaze!)
baseline; Aligned children vertically so their baselines align (doesn't really work)
stretch; Force children to be height of container (great for columns)
See it in action:
http://codepen.io/enxaneta/full/adLPwv/
In my opinion:
These should have been named:
flex-x: alignment/spacing in primary axis
flex-y: alignment in secondary axis
But with HTML you can never have nice things. Never.
Answer from Robot on Stack OverflowCSS-Tricks
css-tricks.com › a-quick-way-to-remember-difference-between-justify-content-align-items
A Quick Way to Remember the Difference Between `justify-content` and `align-items` | CSS-Tricks
April 5, 2018 - When you have only two options ... that acts like font justifying horizontally. So, align-items will be just opposite assuming the default flex-flow in action....
Videos
Reddit
reddit.com › r/webdev › confused about align-content, align-items, justify-content, justify-items???
r/webdev on Reddit: Confused about align-content, align-items, justify-content, justify-items???
May 7, 2021 -
https://codepen.io/cgregurich/pen/jOBEZXb
I'm trying to understand flex box and stuff, and I'm very confused by align-content vs align-items and justify-content vs justify-items.
I don't think my confusion has much to do with understanding the different between align VS justify, but rather the difference between items and content.
Mainly the fact that to get this to display as I want (numbers in the center of the boxes), I have to use justify-content and align-items, but if I were to use justify-items and align-content then it doesn't work as desired.
Why?
Top answer 1 of 8
6
In particular for flexbox the Flexbox Froggy game is a very neat teaching tool.
2 of 8
6
justify-items: Sets the justify-self of all the child items in the container. It defines how each individual child element is aligned within it's alignment container. This distinction is important: A grid element's alignment container is not the entire grid; It is the individual box the element resides in. justify-content: Aligns the contents of the container with the container itself. For a flex container this is along the main axis (the main axis is horizontal or vertical depending on whether the flex container is a row or a column). For a grid container this is the inline axis (the row axis). align-items: Sets the align-self of all items in a container. For flex containers, the alignment is along the cross axis (opposite of the above-mentioned main axis). For grid containers, the alignment is along the block axis (opposite of the above-mentioned inline/row axis). This is again similar to justify-items in that each individual child element is aligned within it's alignment container. align-content: Aligns the child elements within the container itself (aka. the space between and around all child containers) along the cross axis (if the parent is a flexbox) or block axis (if parent is a grid). Notice the distinction here: *-items: The alignment container is each individual child elements "box" within the parent element. *-content: The alignment container is the parent element itself. Mainly the fact that to get this to display as I want (numbers in the center of the boxes), I have to use justify-content and align-items, but if I were to use justify-items and align-content then it doesn't work as desired. Why? The MDN covers this . In short, justify-self is ignored by Flexbox because content is treated as a group along the main axis. The alignment container for a flexbox is the entire main axis, so justify-self (and by extension justify-items) would be redundant. As to why align-content doesn't work in your example: "This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)." (from MDN). In your example, the flex boxes are all single line. You could get align-content: center; to work if you add flex-wrap: wrap to the parent element.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Flexible_box_layout › Aligning_items
Aligning items in a flex container - CSS | MDN
Flexbox provides several properties to control alignment and spacing, with align-items and justify-content being fundamental for centering elements. To center an element, we use the align-items property to align the item on the cross axis, which in this case is the block axis running vertically.
GeeksforGeeks
geeksforgeeks.org › css › difference-between-justify-content-vs-align-items-in-css
Difference Between Justify-Content and Align-Items In CSS - GeeksforGeeks
August 6, 2024 - In CSS, "justify-content" aligns items along the main axis (usually horizontal), controlling space distribution within a container. In contrast, "align-items" aligns items along the cross-axis (usually vertical), managing how items are placed ...
freeCodeCamp
forum.freecodecamp.org › html-css
Justify-content vs Align-items - HTML-CSS - The freeCodeCamp Forum
January 10, 2021 - Hi everyone! Can someone please provide an explanation: What is the relationship between justify-content and align-items? What are their differences? How do each of them function? Thank you in regards!
Medium
medium.com › @kristinethejohnson › align-items-align-content-justify-content-oh-my-fef3e435f739
Align-items, align-content, justify-content, OH MY! | by Kristine Johnson | Medium
March 12, 2022 - The align-items property moves along the CROSS axis, never the main axis (the align-items property is like the Robin to justify-content’s Batman). As we’ve seen above, when you’re using a flex-direction of row the cross axis is the vertical ...
Tailwind CSS
tailwindcss.com › docs › justify-content
justify-content - Flexbox & Grid - Tailwind CSS
When there is not enough space available, the justify-end-safe utility will align items to the start of the container instead of the end.
W3Schools
w3schools.com › cssref › css3_pr_justify-content.php
CSS justify-content property
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
Tailwind CSS
tailwindcss.com › docs › justify-items
justify-items - Flexbox & Grid - Tailwind CSS
When there is not enough space available, the justify-items-end-safe utility will align items to the start of the container instead of the end.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › justify-content
justify-content - CSS | MDN
December 5, 2025 - This property shares many keyword values with the align-content property, but not all! justify-content isn't involved in baseline alignment, and therefore does not take baseline values. In flex layouts, the property defines how positive free space is distributed between or around flex items ...
Bootstrap
getbootstrap.com › docs › 5.3 › utilities › flex
Flex · Bootstrap v5.3
Responsive variations also exist for justify-content. ... Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
React Native
reactnative.dev › docs › flexbox
Layout with Flexbox · React Native
February 20, 2026 - ... alignItems describes how to align children along the cross axis of their container. It is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.
OpenClassrooms
openclassrooms.com › en › courses › 5295881-create-web-page-layouts-with-css › 5415181-align-items-and-justify-content
Align items and justify content
The web browser you are using is out of date, please upgrade
W3Schools
w3schools.com › css › css3_flexbox_container.asp
CSS Flexbox Container
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
Bitstack
blog.bitsrc.io › mastering-css-properties-a-deep-dive-into-align-content-justify-content-align-items-and-342c47858ea8
Mastering CSS Properties: A Deep Dive into Align-content, Justify-content, Align-items, and…
March 4, 2025 - ... space-between: Lines evenly ... with equal space around and between them. justify-content aligns a flex or grid container's items along the main axis of the current line....
CSS-Tricks
css-tricks.com › snippets › css › a-guide-to-flexbox
A Complete Guide to CSS Flexbox | CSS-Tricks
February 8, 2026 - Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis). .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ...
freeCodeCamp
forum.freecodecamp.org › html-css
Justify-content & align-content vs justify-items and align-items - HTML-CSS - The freeCodeCamp Forum
July 18, 2021 - It’s very confusing. I saw some stackoverflow answers, but I didn’t quite get it. They used a lot of complicated terminology. Thank you in advance! 😀
Bootstrap
getbootstrap.com › docs › 4.3 › utilities › flex
Flex · Bootstrap
Responsive variations also exist for justify-content. ... Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).