Changing the Order of Flex Items5: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.
orderproperty applies to flex items only.
- We can use the
orderproperty 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
orderplaces flex items relative to the other items'
- To place a flex item before another item, it needs to have a lower
ordervalue than the item.
- To place a flex item after another item, it needs to have a higher
ordervalue than the item.
By default, flex items are laid out in the order they appear in the source code. 0:00 But we can use the order property to change the order of any flex item. 0:05 For example, I can make Item 6 appear first on the main axis. 0:10 Even second, third, fourth, or fifth. 0:15 Or I can make Item 1 appear last on the main axis. 0:17 This is another great feature that demonstrates the power 0:22 of Flexbox's source order dependence. 0:25 We can structure an HTML document for SEO or accessibility first, 0:27 then rearrange the content without ever editing the HTML. 0:33 The order proper applies to flex items only. 0:37 So if you apply the order property to a flex container, 0:40 it will have no effect on it. 0:43 Back in flexbox.css, I'm going to create a new rule that targets the class item-6. 0:44 Inside this rule, I'll add the order property. 0:53 Now the default order of all flex items is zero. 0:57 So if I want to place Item 6 at the beginning of the row, 1:02 I can give it any value lower than zero. 1:07 So back in the item-6 rule I'm going to set item-6 order value to -1. 1:10 And when I refresh the browser, Item 6 is now first in the flex box order, 1:19 followed by Items 1, Item 2, Item 3 and so on. 1:24 Since Items 1 through 5 have an order of zero by default, 1:29 the value -1 places Item 6 before all of them. 1:35 Likewise, if I want Item 1 to appear last, I can give it any value higher than zero. 1:41 So back in my style sheet, I'm going to change this rule to target item-1, 1:48 then I'll set the order value to 1. 1:54 Items 2 through 6 have an order of 0 by default, 2:02 so the value 1 places Item 1 after them. 2:07 What do you think will happen if I target Item 2 and give it an order value of 2? 2:11 So now Items 3 through 6 still have an order of 0. 2:27 And Item 1 has an order of 1. 2:33 So Item 2 now has a higher order value. 2:37 So now it's the last item on the line. 2:41 So the order value places the flex items relative to the other items' order values. 2:45 To place a flex item before another flex item, 2:51 it needs to have a lower order value than the item. 2:54 For instance, if I now want to move Item 6 to the second position, 2:58 Item 6 needs to have a lower order value than Item 4, but 3:03 it also needs to have a higher order value than Item 3, 3:08 the item that appears before it. 3:12 Similarly, if I want to place Item 4 after Item 5, 3:15 Item 4 needs to have a higher order value than Item 5 and 3:21 a lower order value than Item 6. 3:26 Let me show you an example. 3:30 First, I'm going to reset all flex items order to zero, 3:32 by deleting all the order properties in the CSS. 3:36 So let's say I want to make item 5 appear second in this row. 3:43 So if I go back to my style sheet and create a new rule 3:49 that targets Item 5, and if I set the order value to 2, 3:54 The item actually appears last as the sixth item. 4:02 Why does this happen? 4:06 Well, it happens because Item 5 has the highest order value of all the flex items. 4:08 Remember, all other flex items have an order of 0 by default. 4:13 So the easiest way to make Item 5 appear second is to give it an order value of -1. 4:17 This places Item 5 at the beginning of the row, so 4:28 now I need to give Item 1 a lower order value. 4:32 So back in flexbox.css I'll create a new rule that targets Item 1, 4:36 and I'm going to set its order value to -2, 4:42 so that it appears before Item 5. 4:46 And there we go. 4:50 Item 5 now appears second in this row. 4:51 The order remains the same, even when you switch the layout from column to row. 4:53 So, for instance, I'll go back to the container rule. 4:59 In my style sheet, I'll add a flex-direction 5:03 property and set the value to column. 5:08 And there you have it! 5:13 The power of flex box ordering. 5:14 Now, the order property is useful for reordering content columns on mobile and 5:16 desktop screens. 5:20 For example, 5:21 on mobile screens you can place a featured content column above all columns, 5:22 then make the column appear second or third in the row on large desktop screens. 5:27
You need to sign up for Treehouse in order to download course files.Sign up