Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Justifying Content Horizontally in Flexbox | Mastering Flexbox for Layouts
CSS Fundamentals

bookJustifying Content Horizontally in Flexbox

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.

index.html

index.html

index.css

index.css

copy

flex-end

All items are at the axis end.

index.html

index.html

index.css

index.css

copy

center

All items are in the center.

index.html

index.html

index.css

index.css

copy

space-around

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

index.html

index.html

index.css

index.css

copy

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

index.css

index.css

copy
question mark

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

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Pregunte me preguntas sobre este tema

Resumir este capítulo

Mostrar ejemplos del mundo real

Awesome!

Completion rate improved to 2.5

bookJustifying Content Horizontally in Flexbox

Desliza para mostrar el menú

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.

index.html

index.html

index.css

index.css

copy

flex-end

All items are at the axis end.

index.html

index.html

index.css

index.css

copy

center

All items are in the center.

index.html

index.html

index.css

index.css

copy

space-around

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

index.html

index.html

index.css

index.css

copy

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

index.css

index.css

copy
question mark

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

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3
some-alt