Flex Order Explained - Beginner CSS Flexbox Tutorial

Опубликовано: 27 Октябрь 2021
на канале: Front End Beginners

273

In this tutorial, we look at how to use the flex order property in CSS Flexbox.

"Order" allows us to rearrange our child flex items in any order we choose, regardless of their original source order in the HTML.

The higher the order value, the later a flex item is displayed in the parent flex container.

It's important to note that flex "order" should only be used for elements that do not contain important content. As their original order in the HTML will not change, rearranging elements visually in the browser can cause navigation issues for users of assistive technology, such as screen readers.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:17 How flex order works
01:56 Understanding order "groups"
03:41 Working with negative order values
04:37 Flex order and flex-direction
04:55 Flex order and accessibility
05:46 Summary

WATCH NEXT:
• CSS Flex Grow (flex-grow) Explained -    • CSS Flex Grow (flex-grow) Explained -...
• CSS Flex Basis (flex-basis) Explained -    • CSS Flex Basis (flex-basis) Explained...
• How to Make the First Flex Item Full Width -    • How to Make the First Flex Item Full ...

На этой странице сайта вы можете посмотреть видео онлайн Flex Order Explained - Beginner CSS Flexbox Tutorial длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Front End Beginners 27 Октябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 273 раз и оно понравилось 13 зрителям. Приятного просмотра!

54,509

1 тыс