1
2
3
revision:
- aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
It defines how the browser distributes space between and around content items along the "main-axis" of a flex container, and the "inline axis" of a grid container.
The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.
Tip: Use the align-items property to align the items vertically.
Note: the justify-content property can also be used on a grid container to align grid items in the inline direction. For pages in English, inline direction is left to right and block direction is downward.
Property values:
flex-start : default value. 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 will have space between them
space-around : items will have space before, between, and after them
space-evenly : items will have equal space around them
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Syntax examples
/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
/* justify-content does not take baseline values */
/* Normal alignment */
justify-content: normal;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly. The first item is flush with the start, the last is flush with the end */
justify-content: space-around; /* Distribute items evenly. Items have a half-size space on either end */
justify-content: space-evenly; /* Distribute items evenly. Items have equal space around them */
justify-content: stretch; /* Distribute items evenly. Stretch 'auto'-sized items to fit the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: unset;
The "justify-content: center;" aligns the flex items at the center of the container:
<div>
<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
</div>
<style>
#main {width: 30vw; height: 10vw; border: 0.2vw solid #c3c3c3; display: flex; justify-content: center;}
#main div { width: 5vw; height: 7vw;}
</style>
code:
<div>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
<div id="main-1">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
</div>
<style>
#main {margin-left: 1vw;width: 30vw;height: 10vw; border: 0.2vw dotted orange; display: flex; justify-content: center;}
#main-1 {margin-left: 1vw;width: 30vw;height: 10vw; border: 0.2vw dotted orange; display: flex; justify-content: space-around;}
#main div {width: 10vw;height: 7vw;}
#main-1 div {width: 10vw;height: 7vw;}
</style>
code:
<div>
<div id="main-2">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
<div id="main-3">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
</div>
<style>
#main-2 {margin-left: 1vw;width: 30vw;height: 10vw; border: 0.2vw dotted orange; display: flex; justify-content: flex-end;}
#main-3 {margin-left: 1vw;width: 30vw;height: 10vw; border: 0.2vw dotted orange; display: flex; justify-content: space-between;}
#main-2 div {width: 10vw;height: 7vw;}
#main-3 div {width: 10vw;height: 7vw;}
</style>
- is set on the grid container to give child elements (grid items) alignment in the inline direction. For pages in English, inline direction is left to right and block direction is downward.
For this property to have any alignment effect, the grid items need available space around themselves in the inline direction.
Tip: To align grid items in block direction instead of inline direction, use "align-items" property.
.
Property values:
legacy : default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute.
normal : dependent on layout context, but similar to 'stretch' for grid layout
stretch : stretches to fill the grid cell if inline-size (width) is not set.
start : align items at the start in the inline direction
left : align items to the left
center : align items to the center
end : align items to the end in the inline direction
right : align items to the right
overflow-alignment : 'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
baseline alignment : the element is aligned with the baseline of the parent.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<div id="container">
<div class="red">RED</div>
<div class="blue">BLUE</div>
<div class="green">GREEN</div>
<div class="red">RED</div>
</div>
</div>
<style>
#container {width: 50%; aspect-ratio: 2/1; border: 0.1vw solid black; display: grid;
grid-template-columns: 1fr 1fr; justify-items: end;}
#container > div {border: 0.1vw solid black;}
.blue {background-color: lightblue; width: 50%;}
.red { background-color: coral; width: 40%;}
.green {background-color: lightgreen; width: 60%;}
</style>
- aligns a grid item within its grid cell in the inline direction. For pages in English, inline direction is left to right and block direction is downward.
For this property to have any alignment effect, the grid item need available space around itself in the inline direction.
Tip: To align a grid item in block direction instead of inline direction, use "align-self" or "align-items" properties.
Property values:
auto : default value. Grid container justify-self property value is inherited.
normal : dependent on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'.
stretch : stretches to fill the grid cell if inline-size (width) is not set.
start : align items at the start in the inline direction
left : align items to the left
center : align items to the center
end : align items to the end in the inline direction
right : align items to the right
overflow-alignment : 'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
baseline alignment : the element is aligned with the baseline of the parent.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<div id="container-A">
<div class="red-A">RED</div>
<div class="blue-A">BLUE<br>justify-self: right</div>
<div class="green-A">GREEN</div>
<div class="red-A">RED</div>
<div class="green-A">GREEN</div>
<div class="red-A">RED</div>
<div class="green-A">GREEN</div>
<div class="red-A">RED</div>
<div class="green-A">GREEN</div>
</div>
</div>
<style>
#container-A {width: 70%; aspect-ratio: 2/1; border: 0.1vw solid black; display: grid;
grid-template-columns: 1fr 1fr 1fr;}
#container-A > div {border: 0.1vw solid black;}
.blue-A {background-color: lightblue; width: 60%; justify-self: right;}
.red-A {background-color: coral; width: 80%;}
.green-A {background-color: lightgreen; width: 70%;}
</style>