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

Conteúdo do Curso

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Justifying Content HorizontallyJustifying 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

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

css

index.css

js

index.js

flex-end

All items are at the axis end.

html

index.html

css

index.css

js

index.js

center

All items are in the center.

html

index.html

css

index.css

js

index.js

space-around

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

html

index.html

css

index.css

js

index.js

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

css

index.css

js

index.js

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

Selecione a resposta correta

Tudo estava claro?

Seção 4. Capítulo 3
course content

Conteúdo do Curso

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Justifying Content HorizontallyJustifying 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

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

css

index.css

js

index.js

flex-end

All items are at the axis end.

html

index.html

css

index.css

js

index.js

center

All items are in the center.

html

index.html

css

index.css

js

index.js

space-around

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

html

index.html

css

index.css

js

index.js

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

css

index.css

js

index.js

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

Selecione a resposta correta

Tudo estava claro?

Seção 4. Capítulo 3
some-alt