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

Керування напрямком

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

Властивість flex-direction дозволяє визначити напрямок, у якому розташовуються елементи flex-контейнера. За замовчуванням ця властивість встановлена як row, що призводить до розташування елементів зліва направо у браузерах з англійською мовою за замовчуванням. Ви можете встановити такі значення:

flex-direction: row | column | row-reverse | column-reverse;

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

row

index.html

index.html

index.css

index.css

row-reverse

index.html

index.html

index.css

index.css

column

Зверніть увагу на ширину елементів; вони займають всю ширину батьківського елемента.

index.html

index.html

index.css

index.css

column-reverse

index.html

index.html

index.css

index.css

question mark

Що робить властивість flex-direction?

Виберіть правильну відповідь

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Керування напрямком

Властивість flex-direction дозволяє визначити напрямок, у якому розташовуються елементи flex-контейнера. За замовчуванням ця властивість встановлена як row, що призводить до розташування елементів зліва направо у браузерах з англійською мовою за замовчуванням. Ви можете встановити такі значення:

flex-direction: row | column | row-reverse | column-reverse;

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

row

index.html

index.html

index.css

index.css

row-reverse

index.html

index.html

index.css

index.css

column

Зверніть увагу на ширину елементів; вони займають всю ширину батьківського елемента.

index.html

index.html

index.css

index.css

column-reverse

index.html

index.html

index.css

index.css

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

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

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

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