Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aligning Items Vertically | Flexbox
CSS Fundamentals

Aligning Items VerticallyAligning Items Vertically

The align-items property governs the vertical arrangement of flex items. Its default value is stretch.

align-items

Let's run the following examples to get where do we need it.

stretch

It means that we extend items to the entire length of the cross axis.

html

index.html

css

index.css

js

index.js

center

Items are in the center of the cross axis.

html

index.html

css

index.css

js

index.js

flex-start

All items start at the beginning of the cross axis.

html

index.html

css

index.css

js

index.js

flex-end

All items are in the end of the cross axis (in the end of the parent flex container).

html

index.html

css

index.css

js

index.js

baseline

All flex items are aligned based on their text content baseline.

html

index.html

css

index.css

js

index.js

1. What does the `align-items` property do?
2. Which of the following values can be used with the `align-items` property?

What does the align-items property do?

Select the correct answer

question-icon

Which of the following values can be used with the align-items property?

Select a few correct answers

Everything was clear?

Section 4. Chapter 4
course content

Course Content

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

Aligning Items VerticallyAligning Items Vertically

The align-items property governs the vertical arrangement of flex items. Its default value is stretch.

align-items

Let's run the following examples to get where do we need it.

stretch

It means that we extend items to the entire length of the cross axis.

html

index.html

css

index.css

js

index.js

center

Items are in the center of the cross axis.

html

index.html

css

index.css

js

index.js

flex-start

All items start at the beginning of the cross axis.

html

index.html

css

index.css

js

index.js

flex-end

All items are in the end of the cross axis (in the end of the parent flex container).

html

index.html

css

index.css

js

index.js

baseline

All flex items are aligned based on their text content baseline.

html

index.html

css

index.css

js

index.js

1. What does the `align-items` property do?
2. Which of the following values can be used with the `align-items` property?

What does the align-items property do?

Select the correct answer

question-icon

Which of the following values can be used with the align-items property?

Select a few correct answers

Everything was clear?

Section 4. Chapter 4
some-alt