Now that we've seen that we can create a Flexbox, we can set the flex-direction, 1
in this lesson, I want to dive deeper into probably the biggest topic of Flexbox, which is creating 2
layout and how you create flexible layout. 3
What is the automatic or default behavior of Flexbox and what can you change to make it what you want 4
it to be? 5
One of the first things to differentiate when we're talking about the different properties to set is, 6
is this property going to go onto the child, which is the flex item? 7
So in this case, each of these items that are contained within the flexible container is a child or 8
is the property going on to the parent? 9
So the container. And it's important when you're learning Flexbox to really differentiate between these 10
two things because as we saw earlier, if you set a property that's intended for the child on the parent 11
selector, it's not going to work. 12
So the first thing I want to mention is that, and this property is called "order", as you can imagine, 13
what it sets is the order of your child items. 14
Normally, this is the color of the rainbow. 15
And you might remember the acronym ROYGBIV. 16
Red, orange, yellow, green, blue, indigo, violet. 17
Now, funnily enough, when I learned the rainbow, for some reason in my mind, blue and indigo were 18
always the other way round. 19
What if you wanted to rearrange these colors of the rainbow? 20
Well, you would use the order property. By default, 21
everything has an order of 0, so they're arranged by their order in the HTML. 22
The red div is above the orange div and this is where the order comes from. 23
What if you wanted to change that? 24
Well, you could set the order. 25
For example, if I selected the green div and I said, well, let's set its order property to 1. 26
Well, immediately it's going to go right to the end of the Flexbox. 27
It's going to be the one at the end. 28
Now you could change that to 1 or you could have it as 5 or 10 or 20, whatever it is, 29
as long as there's nothing set between that number and any of these other ones which are all defaulting 30
to 0, then it's just going to look at which one's bigger, right? 31
10 is bigger than 0. 32
So 10 is going to go here. 33
But if this was nine, then obviously 10 is greater than 9. 34
9 is greater than 0. 35
But say this was, I don't know, 20, then the 20 is going to get moved over here. 36
So this is just a really easy way of picking out a specific element that is a Flexbox item and then 37
setting the order property on it to be whichever it is you want to be to set up the order. 38
So pretty simple so far. 39
The next one I want to mention is something called the "flex-wrap" property, 40
and this is really useful when you run out of space on the horizontal. 41
Here we've got a row-based Flexbox. 42
The main axis is from left to right. 43
New items gets added on here at the right. 44
But what happens if you have too many items or some of these items are a bit longer? 45
Well, it's just going to be pushed to the end. 46
And once we run out of space, it's not going to go on to the next line. 47
This is the default behavior of Flexbox and the flex-wrap property is normally set to nowrap. 48
Don't ask me why there is no hyphen between no and wrap like a good CSS value should be, 49
but this is just how it is. 50
And every single time I look at that property, I always see the words now wrap and I think about Snoop 51
Dogg rapping to my Flexbox, 52
but remember, no hyphen, 53
that's just the default behavior. 54
Let's say we have a new item and everything is set to nowrap, 55
then it's just going to continue pushing until you can't collapse any of these items anymore and things 56
get pushed off the page. 57
Now you can change this property to wrap instead, but this is not a very responsive layout because 58
when you shrink the width of your window, then all the items that don't fit are going to be pushed 59
off the screen and the user won't be able to see it. 60
If you want this to actually continue on to the next line instead of being invisible, then you could 61
change this property flex-wrap to wrap instead. 62
And what this will do is it'll move all the elements that don't have enough space to fit in its full 63
minimum width onto the top line. 64
It'll just go to the next line and continue wrapping. 65
Now remember this flex-wrap is a property on the parent, 66
so this is set onto the Flexbox container itself and it tells how all of the children should behave, 67
namely, they should wrap around. 68
Now, it's a really good idea to play around with some of these properties to see how they work, which 69
is why I've created a demo website for you at https://appbrewery.github.io/flex-layout/ 70
So if you go to this website, you'll see we've got our rainbow colors and we've got some selectors 71
down here. 72
We just learned about flex-wrap, which can be changed on the container, 73
and the container is this orange box that you see around the entire border here. 74
If we turned this container into, say, a flex-wrap: wrap, then you can see what will happen is when 75
I decrease the width of the screen, all of those child flex items go on to the next line, which is 76
pretty neat. 77
Now, there's also something called wrap-reverse, and it means that things are wrapped, but it goes 78
from the bottom-right corner to the top-left corner instead of the normal version, which is from the 79
top-left to the bottom-right. 80
It's sort of like an axis, I guess because we're now in two dimensions when we're wrapping. Have 81
a play around with that and then once you're done, let's learn about another property. 82
This one is called "justify-content", and again, it's set on the parent container. 83
Justify- content basically sets the distribution of our items along the main axis. 84
This concept of main axis and cross axis is going to come back, 85
but remember what we learned when we learned about the flex-direction. When we have a row, the main 86
axis is from left to right and the cross axis is from top to bottom. 87
So here we have a row based Flexbox. 88
So that's how it's set up. 89
And if it was a column based setup, then the main and the cross axis would flip. 90
In this particular example, if we set the justify-content to flex-start, then this is exactly what 91
you're going to see, 92
everything is going to be bunched up to the left. 93
And on the opposite end of that is flex- end where everything gets bunched up all to the end. 94
And this is of course provided that when all the items are expanded to their maximum width, there is 95
still space left for us to actually justify the content. 96
If all the items have already taken up all this space, then this is not going to behave like this. 97
Now the next one is justify-content: center, which is a pretty easy way of centering items in CSS. Compared 98
to all of the other ways that we can center using traditional CSS, 99
t his is a really, really almost like a godsend of a property. 100
Very easy to horizontally center, 101
or if you had the main axis going that way, you could vertically center as well. 102
And then there's also different properties which allow you to have spacing between the different elements. 103
And this is something that's used really commonly because when you're creating a website layout, you 104
kind of want everything to use up the available space and create some gaps between each other to distribute. 105
Coming back to our demo website on flex layout, then if we take a look at the Justify Content, you 106
can see we've got Flex Start, Flex End, and I want you to just play around with some of these different 107
versions. 108
So Space Between makes sure that the first and last items are stuck to the edges of the container and 109
then Space Around makes sure that this gap between the left and the right, and the center, add up to the 110
space between each of the items and then there is Space Evenly, where each of the gaps are equal. 111
So Flexbox does all of the math and calculations for us in order to achieve the layout that we want, 112
and if you play around with some of these different versions, then you can see what is it that you 113
want to achieve and which value you'll need to set for Justify Content. 114
The next property is called "align-items" and align-items is a little bit different from justify items, 115
even though some of the values might seem really similar. 116
This is the position of the item, 117
so remember, this is a row-based Flexbox. 118
So here is our main axis and this is what we use justify-content to set the distribution. 119
Now, in this case, we've got align-items which actually sets the distribution along the cross-axis. 120
And again, this is a property that's set on our container. 121
But if you notice here, our container is only taking up the height of our items. For align-items to 122
really work, we actually need to set the height of the container. 123
So in this case, we're setting it to 70vh and vh is short for viewport height. 124
It's basically the height of the window that you're viewing the page. 125
If this was the window size, then this would be 100vh, 126
and then if we're setting it to, this is not quite 70, this is more like maybe 60, but this height 127
is what we're setting when we set the height of our container. 128
So once our container is a little bit bigger, then we actually have the ability to align our items, 129
align-items: flex-start 130
is going to make it all bunch up to the top and then we've got flex-end, which makes everything 131
bunch up to the bottom. 132
And similarly to justify content, we've got center and we've also got some other stuff. To demonstrate 133
align-items, 134
I want you to change the Flex Wrap back to No Wrap, if you've changed this, and then if you see Flex Start, 135
Flex End, Center, Baseline or Stretch, they all work pretty much as you would expect. 136
Now, if Wrap was enabled, then you're going to see that the behavior is not going to be quite what 137
you expect. 138
And we're going to talk about this a little bit later on when we talk about Align Content. 139
But for now, keep the Wrap set to No Wrap and then play around with Align Items. 140
Now, what if you wanted to align everything in the container to the center? 141
So you use align-items: center, but then you wanted one particular item, 142
for example this one, to be right at the top, 143
well, it would need a different align value, right? 144
In this case, what you can do is all of these properties that we've set over here are on the container, 145
so on the parent. 146
But you can reach into the actual item itself and set a property called "align-self". 147
So this is saying let's be an independent item and let's think for ourselves, 148
if we set this property to start or end or whichever it is that you want, then it'll actually make 149
this item separate from the groupthink and do its own thing. 150
At this point, you might already be a little bit overwhelmed by all of the different options, 151
you think, "Oh, what if I don't remember all of these?" 152
"Do I have to memorize everything?" 153
No. 154
We are programmers. 155
We don't memorize anything because we have the internet and the computer at our fingertips. 156
A good resource I want to point you to is the CSS Flexbox cheat sheet from CSS tricks, and I will link 157
to it in the course resources for this lesson. 158
So you can either download the entire poster or you can just look through it in the web page. 159
Notice how they differentiate between properties for the parent and the properties for the children. 160
When we look at something that we've talked about just now, for example, flex-wrap, it tells you 161
all of the different possible options. 162
So you wouldn't set all three, you would pick one and it tells you what each of these values will do. 163
Similarly, we've got our justify-content 164
it shows you what each of them does and also describes what each of them does, and then align-items. 165
And then what we saw just now was a property for the children, which is the align-self property. 166
And you can see all of the different possible variations that you could use. 167
Now, the final property I want to talk about today is the "align-content". 168
And I said I would come back to this, align-content is similar to align-items, but it only works when 169
you have the flex-wrap set to wrap. 170
So when you've made your items wrap and then you want to specify how the content should align, then 171
that's when you would set align content. 172
If we applied, align-content to center and we made our Flexbox wrap, then when the width of our window 173
reduces, everything will bunch up together. 174
If they need a second line, they'll go on to the second line and then it's going to look at this 175
align-content value to see how it should be spaced on the screen. 176
One of the things you might be wondering at this stage, well, what exactly is the difference between 177
Align Items and Align Content? 178
Because when everything is Nowrap, when we set Align Content, it doesn't really do anything, 179
but when we set our items to Wrap and then there's not enough width to have everything on one line, 180
that's when our Align Content starts working so we can set it to Center, we can set it to Flex End, 181
to Flex Start. Have a play around with the different properties and take a look at the cheat sheet 182
here. 183
Remember, you don't need to memorize anything as long as you know where to go and find help. 184
So when you want to align something and you don't remember what justify-content does, go over here, 185
just read the different values and pick the one that you want. 186
And I'm a really big believer in the sort of just in time recap. 187
So when you're learning stuff like you are now, I'm trying to tell you all the things that are possible 188
and then when you actually need to apply it for your own projects, you remember the fact that this 189
is possible and all you need to do is just to refresh yourself on how to do it precisely. 190
And that way you don't have to memorize any of the things. 191
Now, in order to complete this lesson, I want you to complete the Flex Box Froggy game. 192
This is an interactive game and it's a really, really brilliant concept created by Thomas Park where 193
you can apply your knowledge of everything that you've learned just now in order to move the frog to 194
the lily pad. 195
Head over to https://appbrewery.github.io/flexboxfroggy/ 196
And I want you to go into the settings and I want you to go ahead and select Intermediate. 197
Now, notice here, there are also different languages if you need that. 198
You can also change the colorblind mode to on or off. 199
But I want you to complete the challenges in intermediate mode. So there's no directions, 200
but remember, you have the cheat sheet and you have what you've learned in this lesson. 201
And the goal is to write the code that's going to move our frog onto the lily pad. 202
So, for example, in this case we've got display: flex, 203
so we know that this is a default row-based Flexbox. 204
If I want to move my frog from the start to the end, all I have to do is use justify-content and set 205
it to flex-end. 206
And once I've done that, you can see my frog is on the lily pad and the next button becomes active. 207
That's just a demo. 208
The rest you're going to have to figure out yourself. 209
If you get stuck, you can go back to the beginner difficulty where they're going to give you a lot 210
more hints. 211
But ideally I want you to stay on intermediate with no directions. 212
Do as a professional developer would, to read the, either MDN Docs or in this case probably easier to 213
just go to the cheat sheet and figure out what will help you and maybe even use the demo page to help 214
you figure out what it is you need in order to move your frogs. 215
Go ahead and try and complete all of the different levels and if you get stuck, you can always change 216
the difficulty and you will probably be able to solve everything much more easily. 217
Pause the video and give that a go now. 218
And once you're done, head over to the next lesson where we're going to continue learning about how 219
sizing works in Flexbox.