Hey, guys, welcome to this module on CSS, Flexbox. 1
We're going to learn all about it, how it works and how we can use it to create complex, flexible 2
layouts using this CSS tool. 3
As we mentioned, a lot of the web layout was originally inspired by newspapers and magazine articles, 4
which is where all these display: inline, display: block, float all comes from, 5
and over the years, the layout of the web has become more and more complex to the extent where it's 6
no longer really that similar to a magazine and a website has become far more complex and far more interactive. 7
Over the years, there have been many ways of implementing HTML and CSS to layout a website. 8
One of the earliest ways was actually using HTML. 9
We had these things called tables, so you could create a "table" element with table rows (tr) and table data (td) 10
to create something like this, a three column layout for your website. 11
And if you set the width of these three columns to different amounts, then you can lay out your web 12
page like this with three boxes or cards or whatever you like to call it. 13
The table element is still very much in use in modern web design, but because it's in the HTML, it 14
should really only be used when semantically you're actually trying to create a table. 15
So in this case, if you were using this to represent some data, like I don't know how many car tires 16
were sold on your website or how many visitors you had in May, then that is probably tabular data and 17
should be represented with a table element. 18
But if you're using table just the layout, the styling of your website, then this is very much a no 19
no in modern web design. 20
And as you'll see, there are much, much better tools to do this nowadays. 21
So you're not left in the dark. 22
After people stopped using tables for layout, they started using what we've explored previously, which 23
is using the Display Property. 24
For example, you could set three divs to have inline block so that they will all show up on the same 25
line, 26
and then if you set them to have a specific amount of width, then as long as there is enough for the 27
entire horizontal, they will be stacked up next to each other like this in different columns. 28
There are some problems with this though, because as you can see, the layout doesn't look great, 29
right? 30
Like, why are they not all on one line at the top? 31
And in order to control this and move these blocks up and to have them all lined up, it's actually 32
really fiddly. 33
And it's quite a painful process. 34
And people have undergone this process just in order to have a specific styling that they want. 35
You could, for example, use position: absolute. So you could take these blocks out of the normal flow 36
of HTML and instead have them be floating above the other content using absolute and then with absolute, 37
you can of course set the how much you want it to go from the left. 38
And then this way you can set up a relatively complex layout, but it's a very inflexible layout because 39
as soon as anything else gets added to this, that's not absolute, say at the bottom, then you're going 40
to have to fiddle around with it to get the right layout. 41
And it's really not responsive and it's just not a great idea. 42
But if you have no other tools, then a hammer is going to do everything, right? 43
But we do have other tools and one of the most relied-on tools in the sort of 2005 to 2010 era, was using 44
float and as we saw, float is a very useful tool for floating images to get text to wrap around it, 45
but people realize that you can actually use float to create more complex layouts as well. 46
For example, we could make all three of these float left so that they stack up next to each other. 47
Alternatively, we could make something on the right, float to the right and we could have something 48
float to the left. 49
And as you saw before, we could clear a footer and use float and clear to basically create a more complex 50
layout. 51
And there are so many float related tips and hacks. 52
For example, there's something called "The Clearfix Hack" and there's different hacks to use, float 53
and clear to create complex layouts that you would want. 54
But again, you know, it's kind of hacky and it's not that simple to reason about, especially 55
when something goes wrong or something doesn't look quite right. 56
It's really hard to fix. 57
And I saw this great thing on puns, which you can Google for where they had this #titanic, 58
float: none, 59
that kind of describes how float is considered these days for complex layout. 60
Don't use float for that. 61
Float is great when you want to float an image to the left or the right of a block of text to wrap the 62
text around it, 63
but don't use floats for layout. Instead 64
use something else like what 65
we're going to explore Flexbox, Grid, Bootstrap, something that is designed specifically for creating 66
an overall page structure. 67
And within each of these blocks you could continue to use your float and your clear, 68
but we're keeping to the original intent of that tool and we're not doing any sort of crazy hacks because 69
Flexbox is also incredibly easy to use. In order to create that layout that we've been coveting using 70
all these different tricks and different hacks, with Flexbox, all you need to do is to wrap your divs 71
inside a container and then target that container in your CSS and set the display to "flex". 72
That's pretty much it. 73
All you need to do in order to get them to be displayed in columns like this, as you would expect on 74
a modern website. 75
Now it's also got these great additional properties like, for example, "gap", where you can add in 76
a gap between each of these items and there's a whole lot more that we're going to cover in this module, 77
and you're going to see just how flexible and easy it is to use Flexbox to create more complex layouts 78
on our website. 79
Now, one of the things that you might realize at this stage is this flex is set on the Display Property. 80
And we know that previously we've looked at display: inline, display: block, display: inline-block 81
and all of that and display: none. 82
This particular set, I want you to think of it as a completely different system. 83
When we're thinking about Flexbox, we have to throw all of this out of the window. 84
That doesn't mean we're not going to use it, because as you see, websites still continue to use these 85
different things, 86
but when you make something flex, it no longer abides by any of these rules. 87
Instead, it's a different system with different rules 88
and we have to learn about it and think about it as a separate entity. 89
And essentially what happens when we declare something display flex is we give a little bit of the control 90
to Flexbox to layout our content in a reasonable and commonly desired way. 91
But we have all of these different modifiers in order to tweak it, to have the exact layout that we 92
want. 93
Again, just to reiterate, remember previously we mentioned that different elements by default have 94
different display values, 95
a div is by default going to be full width block. 96
A span is by default going to be an inline element. 97
Well, when you use Flexbox and you enclose all of the elements that you want to display inside a flexible 98
container, then what happens is all of these previous display values will be ignored, 99
and instead, we're going to have everything laid out by Flexbox. And the width of each of the elements 100
inside the Flexbox will normally be based on the content size. 101
So it's going to try and let you have all of your content displayed in one line. 102
And it doesn't matter what type of element you've got inside the Flexbox, 103
it's going to apply the Flexbox rules to each of them. 104
As we saw, we could use that property called gap in order to add a gap. 105
So you could, for example, set it to be 10px, which would be pretty static. 106
Or if you want it to be more responsive, you could set it to 1rem, which remember from previous 107
lessons we learned is a unit that is going to adapt based on the top-level size of your content. 108
By default, when you declare a container to be display: flex, it's going to create a container that 109
is going to be actually more or less like a block element. 110
It's going to be 100% full width. 111
But there's also this thing where instead of setting the container to be display: flex, you can actually 112
set it to be display: inline-flex, and similarly to the inline-block, 113
what it does is it allows this Flexbox to occupy as much space as it needs, but it means that other 114
things can also go and occupy that same line. 115
So this is just two different versions of creating a Flexbox container. 116
So in this lesson, we looked very briefly at what happens when you set a container to be display: flex. 117
So now we're going to try and exercise and see if we've taken on some of the ideas that we've learned 118
in this lesson. 119
Go ahead and download the starting folder and extract it and open it inside VS Code, select index.html 120
and go ahead and show it in preview mode. 121
You can see I've got a couple of different page layout methods that I mentioned in the lesson and it's 122
linked to in this home page. 123
So I showed you how an HTML table would look like and you can look at the code for that layout by going 124
over to html-table.html. 125
You can see we've set different values on the table data or the actual table itself and the different 126
table rows. 127
And we've created a reasonable sort of layout and then you can see how we can create a similar layout 128
using inline-block and how this is also more or less responsive. 129
We've set different widths, but you can see how the layout is actually all defaulting down to squish 130
at the bottom. 131
And I want you to just explore some of these different ways of laying out content on a web page. 132
Now, finally, I want you to take a look at flex.html and see how easy it was to create that layout and 133
how few lines of code it actually required. 134
Now, once you've done that, it's time for your challenge, which 135
is to take the index.html page which looks like this, and it's created using a whole bunch of 136
list items. 137
Now I've gotten rid of the bullet points by setting list style to none, which you can switch on and 138
off to see what happens, 139
and this basically just gets rid of the bullet points, 140
but I want you to turn this into a navigation bar. 141
So I want everything to be on the horizontal. 142
And if you take a look inside the goal image, this is what you're looking for. 143
So you want all of these things to go up so that they are kind of laid out like this. 144
You want to have a gap between them. 145
You can set how big this gap you want it to be, but essentially this is the sort of outcome you're looking 146
for, and I want you to do it using Flexbox. 147
Pause the video now and see if you can complete this challenge. 148
All right. 149
So this should be a relatively simple challenge. 150
So we've got our preview on the right and then we've got our index on the left. 151
If you remember, Flexbox is declared on the container that contains all the elements that you want 152
to flex. 153
So in this case, we've got a div with a class of ".container" that contains all the things we want. 154
Let's go into this class selector and then go ahead and change the display to flex. 155
And you can see almost immediately everything is now on the same line, looking pretty much like a 156
nav-bar that you would see out in the wild. 157
The only thing we need to do is add a little bit of a gap between each of those items. 158
So we could either add a 10px gap, which looks pretty good, or you could use the rem system. 159
If you don't remember what the rem is about, go back, 160
there is a lesson where we covered font sizes where we talk about this in more detail, but no matter 161
which way you do, you should be able to achieve this layout relatively easily. 162
And if you want to take a look at the solution, you can see as well that the only thing that's really 163
added are these two things in order to achieve this final goal outcome. 164
Hopefully, you managed to do that and you managed to see what declaring display as Flex does to our HTML 165
elements. 166
And in the next lesson, we're going to dive deeper into Flexbox and we're going to learn more about 167
the "Flexbox axis" and the "direction of flex." 168
So for all of that and more, I'll see you there.