Вивчайте Встановлення Напрямку Flex для Макетів

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

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

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

row

index.html

index.css

row-reverse

index.html

index.css

column

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

index.html

index.css

column-reverse

index.html

index.css

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

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

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

Запитати АІ

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

Suggested prompts:

Can you explain the difference between each flex-direction value?

How does flex-direction affect the layout of navigation menus?

Can you show more examples of when to use each flex-direction option?

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

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

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

row

index.html

index.css

row-reverse

index.html

index.css

column

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

index.html

index.css

column-reverse

index.html

index.css

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

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

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