- Controlling the Direction of Flex Items 3:47
- Wrapping Flex Items 2:33
- Distributing Space Inside a Flex Container 5:55
- Changing the Order of Flex Items 5:32
- Wrapping Items and Distributing Space 3 objectives
- Growing Flex Items 3:42
- Smarter Layouts with flex-basis and flex 6:42
- Aligning Flex Items on the Cross Axis 3:43
- Growing and Aligning Flex Items 3 objectives
- Vertical and Horizontal Centering 4:14
- Flexbox Properties Review 6 questions
Preview
Video Player
00:00
00:00
Changing the Order of Flex Items
5:32By 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.
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 independence.
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 flexbox order,
1:19
followed by Item 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