Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Justifying Content Horizontally | Flexbox

bookJustifying 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.

justify-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.

html

index

css

index

js

index

copy
<!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

flex-end

All items are at the axis end.

html

index

css

index

js

index

copy
<!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

center

All items are in the center.

html

index

css

index

js

index

copy
<!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

space-around

It distributes all the items evenly along the main axis with a bit of space left at either end.

html

index

css

index

js

index

copy
<!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

space-between

It is very similar to space-around except that it doesn't leave any space at the axis on both ends.

html

index

css

index

js

index

copy
<!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
Which of the following values for the `justify-content` property will align flex items along the center of a flex container?

Which of the following values for the justify-content property will align flex items along the center of a flex container?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3
We use cookies to make your experience better!
some-alt