Today we're going to be talking about, for the first course,
just dive deep into a little more about using the flexbox display in HTML.
This is a new way of creating very responsive grids and
layout, and it's actually really easy.
So this is a demo that will feature just the basics of flexbox.
So let's assume that I'm starting my webpage from scratch.
I do not want to use bootstrap.
I do not want to use the ert great layout structure, I want
to be able to figure out how to create my own custom layout using flexbox.
And here's the code and I just want to go through down here,
here's basically the code here, here's all these [INAUDIBLE] as you can see
here and I've used just the basic CSS.
Actually color [INAUDIBLE] because you can clearly see what,
how you will be going to actually align a layout a nice sort of a layout or
so basically in this case I'll start off,
I'll just create a budget disk and by default.
Their displays, this is called display block, they typically pick up the whole
width of the browser and they stack on top of each other.
And that's, by default, how everything works.
Now, how I would change this from the default display from a block display to
flex display,
is really just this one line of code here in my container object.
Also need to make sure that we have object here.
This actually crucial to do, so
a lot of web developers use a one by container.
Everything else will get control, a lot of the rest of the elements down here.
So, in my container object, container element I will go in.
Actually this and save this,
and now I refresh and this is flex.
So this is what it looks like now.
And now you're like wait a minute what just happened?
Flex by default tries to put everything instead of a horizontal mode,
it lights up everything in a more vertical mode so
basically what we've done is in one line of code,
we're able to lay out all of our
side by side instead of stacked on top of each other.
Now sometimes they're like well that's fine, [INAUDIBLE].
They are structured but I won't be able to control the layout a little more,
is there a way to control the layout?
And what it is is called flex graph.
It's an option in CSS called flex graph.
So that's the graphing feature.
And here we go.
So basically it goes back to what we've seen like with flex
graph it actually if the element doesn't fit on one row
it actually wraps around the whole web page.
Then you figure out one more.
I want to be able to control.
I want weather and advertisement to line out side by side, so how do I do that?
And the key is to learn FLEX and display FLEX and display FLEX graph,
gives you the basic foundation in order for
you to be able to control the width of your elements.
So, let's say okay, I won't be able to have green.
This isn't that this is my weather or outlet and
my advertisements, they'll be side by side.
And they'll each take 50% of my width of my browser.
Same thing, I want my gray and my yellow, related article and
by not a related article I don't want them to appear side by side as well.
So what we simply do is we just, this is go to here.
We just set the width and flex box, right here, this is magic.
And a couple of steps.
I'm able to create somewhat of a layout for it,
and as you can see, this is pretty fast.
You can say, well Mark, this is great, but
I won't be able to have a very flexible layout, in say,
if a person were to load this up in a mobile app, mobile device.
So basically if I were to, there we go, if I were to resize.
As you see, I'm resizing this right now.
This is basically the size of a typical mobile phone.
But you don't want them to look at this tiny weather section here,
in that tiny advertising section.
You actually want them to think about, okay.
Let me just, is there a way for me to go ahead and
like lay out everything on top in my mobile, when my viewport is this width?
And then, like, have the weather advertisements, the related article, and
the.
The grey, yellow, and the green and
red side by side when a user is using up your spec.
Juris is [INAUDIBLE] and you learned that in [INAUDIBLE] CSS.
And what I'm going to do is I'm going to set, I'm going to have logic says like.
If the width is around,
it's greater than 360 pixels.
If this is just where your [INAUDIBLE] pixels.
I'm going to have you should be green or red show side by side.
And if the width is less than 360 pixels like this one is like,
I'm going to have all these divs stacked on top of eachother.
What I do is I go back into my code and I include immediate work.
[SOUND] And you thought you've learned that HTML CSS class,
again reminder, it's called media at media's cleaning.
And minimum width is 316 watts.
So basically if the minimal width is 361.
I want to create, so basically if I have a big screen,
if the user has a big screen.
I want to green, red, grey, yellow have a width of 50%.
Otherwise I'm going have all of them stacked on top of each other.
Because by default, if you go up here, the width is 100% for each division.
So there's your fresh air.
So, this is what was simulated how you're going to simulate on
a mobile phone.
[INAUDIBLE] And if you think about okay this is [INAUDIBLE] and
if i increase the screen we now go to someone with a bigger screen.
That's basically a quick demo of how you would start thinking
about using these flex box properties to learn about how to create
some very robust layouts in a very simple and elegant way.
So I really would highly recommend you check out flexbox a little more.
If you want to design your site using your own layout
tools because I know we've taught you how to use Bootstrap.
Now in this session we're teaching you how to create your own custom layout.