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

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

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.

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

flex-end

All items are at the axis end.

html

index

css

index

js

index

copy

center

All items are in the center.

html

index

css

index

js

index

copy

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

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

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

Everything was clear?

Section 4. Chapter 3
We're sorry to hear that something went wrong. What happened?
some-alt