Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Вертикальне вирівнювання елементів у Flexbox | Володіння Flexbox для Макетів
Основи CSS

bookВертикальне вирівнювання елементів у Flexbox

Властивість align-items визначає вертикальне вирівнювання елементів flex-контейнера. Значення за замовчуванням — stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

Розглянемо наступні приклади, щоб зрозуміти, коли це потрібно.

stretch

Означає, що елементи розтягуються на всю довжину поперечної осі.

index.html

index.html

index.css

index.css

copy

center

Елементи розташовані по центру поперечної осі.

index.html

index.html

index.css

index.css

copy

flex-start

Усі елементи розташовані на початку поперечної осі.

index.html

index.html

index.css

index.css

copy

flex-end

Усі елементи розташовані в кінці поперечної осі (у кінці батьківського flex-контейнера).

index.html

index.html

index.css

index.css

copy

baseline

Усі елементи flex вирівнюються відповідно до базової лінії їх текстового вмісту.

index.html

index.html

index.css

index.css

copy

1. Що робить властивість align-items?

2. Які з наступних значень можна використовувати з властивістю align-items?

question mark

Що робить властивість align-items?

Select the correct answer

question mark

Які з наступних значень можна використовувати з властивістю align-items?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain the difference between align-items and justify-content?

Can you show visual examples of each align-items value?

When should I use each align-items value in a real project?

Awesome!

Completion rate improved to 2.56

bookВертикальне вирівнювання елементів у Flexbox

Свайпніть щоб показати меню

Властивість align-items визначає вертикальне вирівнювання елементів flex-контейнера. Значення за замовчуванням — stretch.

align-items: stretch | center | flex-start | flex-end | baseline;

Розглянемо наступні приклади, щоб зрозуміти, коли це потрібно.

stretch

Означає, що елементи розтягуються на всю довжину поперечної осі.

index.html

index.html

index.css

index.css

copy

center

Елементи розташовані по центру поперечної осі.

index.html

index.html

index.css

index.css

copy

flex-start

Усі елементи розташовані на початку поперечної осі.

index.html

index.html

index.css

index.css

copy

flex-end

Усі елементи розташовані в кінці поперечної осі (у кінці батьківського flex-контейнера).

index.html

index.html

index.css

index.css

copy

baseline

Усі елементи flex вирівнюються відповідно до базової лінії їх текстового вмісту.

index.html

index.html

index.css

index.css

copy

1. Що робить властивість align-items?

2. Які з наступних значень можна використовувати з властивістю align-items?

question mark

Що робить властивість align-items?

Select the correct answer

question mark

Які з наступних значень можна використовувати з властивістю align-items?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 4
some-alt