Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library

Changing the Order of Flex Items

5:32 with Guil Hernandez

By default, flex items are laid out in the order they appear in the source code. We can use the `order` property to change the order of any flex item.

Resources

Video review

  • The order property applies to flex items only.
  • We can use the order property to change the order of any flex item.
  • You can structure an HTML document for SEO or accessibility first, then rearrange the content without ever editing the HTML.
  • The default order of all flex items is 0.
  • order places flex items relative to the other items' order values.
  • To place a flex item before another item, it needs to have a lower order value than the item.
  • To place a flex item after another item, it needs to have a higher order value than the item.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    But we can use the order property to change the order of any flex item. 0:00
    For example, I can make Item 6 appear first on the main axis. 0:01
    Even second, third, fourth, or fifth. 0:06
    Or I can make Item 1 appear last on the main axis. 0:08
    This is another great feature that demonstrates the power 0:13
    of Flexbox's source order independence. 0:16
    We can structure an HTML document for SEO or accessibility first, 0:18
    then rearrange the content without ever editing the HTML. 0:24
    The order proper applies to flex items only. 0:28

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up