Difference Between Justify-Content and Align-Items In CSS
Last Updated :
06 Aug, 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 relative to each other within the container. Both are key for arranging items in Flexbox and Grid layouts.
CSS Justify-Content
The justify-content CSS property aligns the items of the flexible container when the items do not use all the space available on the horizontal or main axis.
Syntax:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
Property values:
Property value | Description |
|---|
flex-start | Items are positioned at the beginning of the container |
|---|
flex-end | Items are positioned at the end of the container |
|---|
center | Items are positioned in the center of the container |
|---|
space-between | Items are positioned such that they will have space between them |
|---|
space-around | Items are positioned such that they will have space before, between, and after them |
|---|
space-evenly | Items are positioned such that they will have equal space around them |
|---|
initial | Sets this property to its default value |
|---|
inherit | Inherits this property from its parent element |
|---|
Note: The default value for the justify-content property is flex-start.
Example: Explanation of Justify-Content through an example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.container>div {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.center {
justify-content: center;
}
.start {
justify-content: flex-start;
}
.end {
justify-content: flex-end;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
</style>
</head>
<body>
<h2> Different Alignments with the CSS justify-content Property </h2>
<p> The following examples demonstrate
different values for the "justify-content" property: </p>
<div class="container center">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> justify-content: center </b> aligns items at
the center of the container. </p>
<div class="container start">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> justify-content: flex-start </b> aligns items
at the start of the container. </p>
<div class="container end">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> justify-content: flex-end </b> aligns
items at the end of the container. </p>
<div class="container space-between">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> justify-content: space-between </b> distributes
items evenly with space between them. </p>
<div class="container space-around">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> justify-content: space-around </b> distributes
items evenly with space around them. </p>
</body>
</html>
Output:
Example For Justify-ContentCSS Align-Items
The align-items CSS property specifies the alignment for the items inside a flexbox or a grid container.
Syntax:
align-items: normal | stretch | positional alignment | flex-start | flex-end | baseline | initial | inherit;
Property values:
In below table, the values that can be set for the align-items CSS property are described briefly.
Property value | Description |
|---|
normal | For flexbox and grid items, it behaves like 'stretch'. For grid items with a defined block size it behaves like 'start'. |
|---|
stretch | Items are stretched to fit the container |
|---|
center | Items are positioned at the center of the container |
|---|
flex-start | Items are positioned at the beginning of the container |
|---|
flex-end | Items are positioned at the end of the container |
|---|
start | Items are positioned at the beginning of their individual grid cells in the direction of the block |
|---|
end | Items are positioned at the end of their individual grid cells in the direction of the block |
|---|
baseline | Items are positioned at the baseline of the container |
|---|
initial | Sets this property to its default value |
|---|
inherit | Inherits this property from its parent element |
|---|
Note: The default value for align-items property is normal.
Example: Explanation of Align-Items through an example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.container>div {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.stretch {
align-items: stretch;
}
.center {
align-items: center;
}
.start {
align-items: flex-start;
}
.end {
align-items: flex-end;
}
.baseline {
align-items: baseline;
}
</style>
</head>
<body>
<h2> Different Alignments with the CSS align-items Property </h2>
<p> The following examples demonstrate
different values for the "align-items" property: </p>
<div class="container stretch">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> align-items: stretch </b> makes items
stretch to fill the container
along the cross axis. </p>
<div class="container center">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> align-items: center </b> aligns items at
the center of the container along the cross axis. </p>
<div class="container start">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> align-items: flex-start </b> aligns items at the
start of the container along the cross axis. </p>
<div class="container end">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> align-items: flex-end </b> aligns items at the
end of the container along the cross axis. </p>
<div class="container baseline">
<div style="background-color:coral;">
1
</div>
<div style="background-color:lightblue;">
2
</div>
<div style="background-color:pink;">
3
</div>
</div>
<p><b> align-items: baseline </b> aligns
items along their baseline. </p>
</body>
</html>
Output:
Example For Align-ItemsDifference Between Justify-Content and Align-Items
Aspect | justify-content | align-items |
|---|
Basic function | It aligns the flex items along the main axis. | It aligns the flex items along the cross axis. |
|---|
Main axis | The main axis is determined by the flex-direction which is horizontal by default. | The cross axis is perpendicular to the main axis. |
|---|
Default value | flex-start | normal |
|---|
Possible values | flex-start, flex-end, center, space-between, space-around, space-evenly, initial, inherit | normal, stretch, positional alignment, flex-start, flex-end, baseline, initial, inherit |
|---|
Impact on layout | It affects the spacing between the items and their alignment on the main axis. | It affects how the items are aligned within their container's height. |
|---|
For horizontal layout | It aligns the items horizontally if the main axis is horizontal. | It aligns the items vertically if the main axis is horizontal. |
|---|
For vertical layout | It aligns the items vertically if the main axis is vertical. | It aligns the items horizontally if the main axis is vertical. |
|---|
To center items | To center items horizontally we can use 'justify-content: center' | To center items vertically we can use 'align-items: center' |
|---|
Spacing | It distributes the space between items or around them on the main axis. | It does not distribute space. It aligns items to either the start, end or center of the cross axis. |
|---|
Applies to | It applies to block containers, flex containers and grid containers. | It applies to flex containers and grid containers. |
|---|
Axis | main/inline | cross/block |
|---|
Aligns | It aligns the content within element (effectively adjusts the padding) | It aligns the items inside box (controls the child item's 'justify-self: auto') |
|---|
Control | It controls the alignment of all the items on the main axis. | It controls the alignment of all items on the cross axis. |
|---|
Conclusion
The CSS properties, the justify-content and the align-items, can be utilized so that the HTML elements can be aligned to the desired position or rather alignment in the browser window. But knowing the difference enables to make more efficient choices to use the CSS properties more effectively.
Similar Reads
Difference between align-content and align-items
Both align-content and align-items function on the cross-axis.Cross-axis in flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then th
4 min read
Differences between HTML <center> Tag and CSS "text-align: center;" Property
If you are designing a simple web page, then not much difference is noticeable, but it is very necessary to understand the basic differences between these two. Since we are only concerned with the text, these elements do not have separate meanings.HTML <center> tag: The <center> tag in H
3 min read
Difference Between " . " and " # " Selector in CSS
In CSS, selectors define which HTML elements receive specific styles. Class Selector (.): Targets elements with a specified class attribute, allowing multiple elements to share the same styling.ID Selector (#): Targets a single element with a unique ID attribute, ensuring that styles are applied to
3 min read
Difference between HTML and CSS
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for creating web pages. HTML provides the structure, while CSS defines the style and layout. HTML is used along with CSS and Javascript to design web pages. HTML (HyperText Markup Language)HTML is the
4 min read
Difference Between CSS and Bootstrap
Cascading Style Sheet(CSS): CSS is developed by Hakon Wium, Bert Bos, World Wide Web 17 December 1996. It is a language used to describes how HTML elements are to be displayed on a web page or layout of HTML documents like fonts, color, margin, padding, Height, Width, Background images, etc. CSS sta
3 min read
Difference between “resetting†and “normalizing†in CSS
CSS (Cascading Style Sheets) is a powerful stylesheet language used to control the presentation of HTML or XML documents, including SVG, MathML, and XHTML. It defines how elements appear across different media, such as screens, paper, and speech. However, developers often face inconsistencies in bro
4 min read
Android - Difference Between MATCH_PARENT, FILL_PARENT and WRAP_CONTENT
Views refer to as a user interface in android. The front end of the application is made by using widgets and views. The prominent language used for the user interface in android is XML. There are different types of Views in the Android Studio such as TextView, ImageView, EditTextView, etc. They all
3 min read
Difference between CSS Grid and Flexbox
CSS Grid arranges items in rows and columns (2-Dimension), while Flexbox aligns items in a single row or column (1-Dimension). CSS Grid LayoutCSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and pos
2 min read
Explain difference between Bootstrap and Foundation frameworks in CSS
In this article, we will know about the Foundation & Bootstrap frameworks in CSS, and will also understand their implementation through the example along with discussing the major differences between them. Foundation 6: A Foundation is an open-source & responsive front-end framework built by
8 min read
What is the Difference Between container and container-fluid in Bootstrap 5 ?
In Bootstrap 5, the "container" class creates a responsive container with a fixed width, adjusting to different screen sizes while maintaining margins. On the other hand, the "container-fluid" class generates a full-width container that spans the entire viewport without any margins, providing a seam
3 min read