Justifying Content Horizontally
The justify-content property is instrumental in determining the position of flex items along the main axis. Its default value is flex-start.
cssjustify-content: flex-start | flex-end | center | space-between | space-around;
Let's consider each case on practice. We will play with the list of cards.
flex-start
Default value, which makes all the items be at the start of the main axis.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>
The Joker is Batman's iconic supervillain known for his chaotic and
sadistic behavior and disfigured clown appearance.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>
.cards-list {
border: 1px solid lawngreen;
display: flex;
width: 660px;
}
.card {
border: 1px dashed cadetblue;
padding: 10px;
width: 80px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decoration */
ul {
list-style: none;
padding-left: 0;
}
flex-end
All items are at the axis end.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>
The Joker is Batman's iconic supervillain known for his chaotic and
sadistic behavior and disfigured clown appearance.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>
.cards-list {
display: flex;
justify-content: flex-end;
border: 1px solid lawngreen;
width: 660px;
}
.card {
border: 1px dashed cadetblue;
padding: 10px;
width: 80px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decoration */
ul {
list-style: none;
padding-left: 0;
}
center
All items are in the center.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>
The Joker is Batman's iconic supervillain known for his chaotic and
sadistic behavior and disfigured clown appearance.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>
.cards-list {
display: flex;
justify-content: center;
border: 1px solid lawngreen;
width: 660px;
}
.card {
border: 1px dashed cadetblue;
padding: 10px;
width: 80px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
space-around
It distributes all the items evenly along the main axis with a bit of space left at either end.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>
The Joker is Batman's iconic supervillain known for his chaotic and
sadistic behavior and disfigured clown appearance.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>
.cards-list {
display: flex;
justify-content: space-around;
border: 1px solid lawngreen;
width: 660px;
}
.card {
border: 1px dashed cadetblue;
padding: 10px;
width: 80px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
space-between
It is very similar to space-around except that it doesn't leave any space at the axis on both ends.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="cards-list">
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png"
alt="Joker"
width="64px"
/>
<p>
The Joker is Batman's iconic supervillain known for his chaotic and
sadistic behavior and disfigured clown appearance.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>
.cards-list {
display: flex;
justify-content: space-between;
border: 1px solid lawngreen;
width: 660px;
}
.card {
border: 1px dashed cadetblue;
padding: 10px;
width: 80px;
}
.card img {
display: block;
margin: 0 auto;
}
/* Remove default decorations */
ul {
list-style: none;
padding-left: 0;
}
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 3
