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

Contenu du cours

CSS Fundamentals

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 Layout
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

book
Aligning Items Vertically

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

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

copy

center

Items are in the center of the cross axis.

html

index.html

css

index.css

copy

flex-start

All items start at the beginning of the cross axis.

html

index.html

css

index.css

copy

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

copy

baseline

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

html

index.html

css

index.css

copy

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?

What does the align-items property do?

Sélectionnez la réponse correcte

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

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

Sélectionnez quelques réponses correctes

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

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