hello everybody welcome back to css3 in
30 days today is day number 22 we're
gonna be playing around with some
flexbox now back in day 9 we used CSS to
create some modern layouts essentially
what we're gonna do today is create
those exact same modern layouts but
instead of using floats and clears and
margins and math we're going to be using
flexbox and I'm going to show you how
incredibly easy it is to create layouts
with flexbox now bear in mind flexbox is
a relatively new technology and not
fully supported totally across the board
but it's pretty darn good and you can
use your discretion on where you want to
use it of course can I use com is a
great website to see which properties
and values those combinations which of
those are more widely supported so you
can use your own discretion and you can
always use fallbacks as well other thing
I want to let you know is flexbox is a
large area of study it's not just a
quick little property or a quick little
style there's actually a lot to it and I
don't want to cover the massive amount
of Theory involved in flexbox I'm gonna
give you a really great resource in fact
it's actually my favorite coding blog is
CSS - tricks by Chris Koya and he has
got the complete guide to flexbox and
i've referred to this on numerous
occasions when making my own flexbox
layouts and websites so and as you could
see it's last updated on November 12th
which at the time of this recording was
only about 15 days ago so he's always
updating this and I love love this
article that he's put to put together
this guide it gives you the background
on flexbox and the basics and
terminology and all the properties and
everything that you would ever need to
know about flexbox
it's really great and a great practice
so part of my homework for this lesson
would be - whether you want to do it
before or after we make some layouts is
head over to CSS - tricks comm slash
snippets slash you know what I'm just
going to put the link up on the screen
here and you know just Google CSS tricks
a flexbox as well that will get you
there I'll put it up on the screen
whatever you need to do to get there
so check that out credit to Chris coiour
for that
so let's get back to it what is flex box
flex box is essentially relatively new
technology since 2009 and onward there's
been multiple iterations of flex box but
basically it's an easy way to create
layouts so that you don't have to use
floats and clears and and all that sort
of stuff it makes creating layouts and
sidebars and organization of content
incredibly easy incredibly streamlined
naturally responsive of course you can
modify it and customize it in whatever
way you wish and when you see how easy
it is to create some simple and modern
layouts you're gonna wonder why you
didn't use flexbox before now before you
just jump on the flex box training
remember you need to do your homework
and your due diligence to make sure
you're not creating a production-ready
client site that's only based on certain
flex box properties that may not be
cross browser compatible so do your
homework let's jump in and show you what
we got so day number 22 flex box layouts
the same layout organization as the day
number nine for modern layouts and down
in the final result you can see the
layout so we got header article a side
footer basic layout content and sidebar
number two got the logo and the cut in
the navigation and a header with two
sidebars an article in the middle
flexbox layout number three essentially
the same header here but the logos on
the right we got three equally sized
articles in a three column grid and
within a main content and then a footer
so that's really it
and let's jump in to our code editor see
what we got
day number twenty two flex box layouts
go ahead and download that come back to
this and let's get started in here we
got some basic markup we've got the
sandbox is what we're gonna be playing
around with and each layout is within a
section tag with the class of layout one
two and three respectively
we have headers a main content with
articles and asides footers it's very
semantic straightforward simple html5
and of course final about CSS is there
for your reference to help you out if
you have any issues of course keep in
mind that every class for the final
result is prepended with fine
underscore whereas we're just going to
be using the classes called layout one
two and three and the reason why I do
that is so that those styles don't
conflict so that the final homework the
final result doesn't conflict with the
sandbox so let's jump in now keep in
mind this isn't gonna be a theory lesson
so if you've never heard of fly flexbox
before certain piece of parts of this
might be a little over your head so
giving you a fair warning right now I'll
do my best to explain certain things but
I do recommend you read that Chris
coiour guide on flexbox should take you
about 15 20 minutes or so just so you
can understand what's going on when we
start playing around some properties
you've maybe never heard of before
layout one main we're selecting the main
tag within layout one we're gonna tell
it display flex so instead of like
inline or block we're gonna say flex and
that's gonna tell everything within the
main content in that main tag - to be
aware that this is a flex item this flex
container and the Flex Direction is
going to allow us to tell tell the
browser how to display the the direction
of the content so in bootstrap we'll use
things like div with the class of row
well in Flex box we just simply use flex
direction and we can say row so we don't
actually have to like create another tag
in HTML to do essentially just this so
we're gonna tell it that the main
content container is actually gonna be a
row it's going to contain a row and you
can also do things like row reverse to
reverse the the order of the elements so
if you have one two three you can
actually save over verse and it will
actually go three two one so I might
show you an example that after so that's
it we have to do for that nothing's
going to happen yet so we're gonna say
layout 1 and then article so in this
element we have an article and an aside
now to make that article fit a certain
amount 3/4 ish of the width and the
sidebar be on the side with a smaller
amount of width all we're gonna do is
say flex and this is a shorthand
property
I believe it's flex grow shrink and
basis
kind of like when you write border and
it has you know solid one pixel read as
a shorthand for three different
properties so I'm just gonna say flex
one now what this says is any articles
within the layout element the layout
class have them all take up the exact
same amount of space so you that's gonna
make a lot of sense when we get to the
layout number three when we've got three
identically sized articles if I were to
say flex one or say flex two the article
will try to take up twice as much space
as the other elements within the Flex
container so but this one is just going
to take up the same amount of space as
every other article or element that is
within that content so let me just show
you if I just say flex one let's see
what happens so you can see that it just
automatically created to 50% width
elements not because I said 50% but
because I said flex one the article will
take article will take up the same
amount of space as the other elements
within that container now if I say flex
two it's not going to do anything
because because the other element the
aside doesn't actually have a flex
property styled on top of it so if we
just went down here and said layout one
aside and then said flex one and then
save that you can see now that the
article is twice the size as these side
now you might be wondering okay but
those are really fixed sizes what if I
don't want to just always be with two
times the width or three times the width
or what if I want to fine-tune that well
you actually can do that quite easily so
I'm going to remove a side here and just
style the article I'm gonna say flex one
as a basis and I'm gonna say 58 percent
now this is essentially this value is
going to tell it the width the maximum
width and that's not technically maximum
width but it's the space that you want
it to take up so you can kind of
override that one-to-one ratio and then
refresh now it's taking 58% of the width
of that container now what I find
interesting is if I were to change this
to 50% it's going to go to its regular
50%
but if I were to go to 100% it's not
going to actually fill it out 100%
because flexbox knows that there's still
a container there so it's not gonna push
it down it still needs to fit within
there so it's this is roughly I don't
really know it looks like it's around
75% so I'm not really entirely sure of
the reason why it does that but it's
kind of smart so I'm gonna go back to my
58% with space there and now the problem
is these are jammed up against one
another so I want a little bit of space
so all I'm gonna say here is just a
margin right 2% and that will give it
some space and it doesn't make the aside
tag fall down or anything like that it
just automatically distributes the width
so that both of these elements can live
happily ever after within its flex
parent now if I were to say flex
Direction row reverse it's going to
reverse these as you can see now the
aside is on the left and the articles on
the right despite the way I've coded the
markup which is really neat this would
take a lot more to style in CSS and
would be a there's a little bit of
hackery going on there if if I was
trying to do that and just floats and
clears and so on and so forth so rower
verse is a nice value for flex direction
but I'm gonna put it back to here and
that's it for the first layout that's
all we had to do now if I had to do this
in just floats and clears I'm hard to do
math and I would have had things
collapsing and it would have been a
little bit stressful and confusing now
that's not to diminish how much was
going on here there's a lot going on
with the shorthand property I encourage
you to read about it and test it and
play around with it but you could see
how exciting this is when creating
layouts so let's jump into layout number
two and we're gonna say layout two
header we're gonna say display Flex of
course flex direction this is something
that you're gonna often be writing these
two things row and then within there
we're gonna say layout - header and then
nav so we're selecting something more
specific we're gonna say flex one save
that and let's see what happens so far
so you can see now that they're both
jammed up kind of it's what's happening
is that flex box is only
taking the calculating the Wits bathe
based on the content within the
container itself for the most part it's
kind of like an inline block so to speak
that's why we have to use additional
properties to space them out and tell
flexbox how much space we want
distributed between the elements so I'm
gonna go down here and say layout -
header nav and I'm gonna say flex one
oops flex and then one and so that
changes it to take up the entire amount
of its its space that's available for it
as you can see it just did it filled out
almost like 100% of its available space
and I'm gonna say margin left to give it
some space I'm gonna do 2% again and
that'll give it space so just like that
I've created that simple layout like
that now I want to move down to the main
element so layout to main so I'm
selecting that main tag and I'm gonna
say display flex flex direction of
course and you guessed it row and now
I'm gonna say layout to article so now
I'm selecting the article within there
now keep in mind there are also two
asides on either side of the element I'm
gonna say flex and one now if I just did
that let's see what happens now
everything here very interesting what's
going on here let me just take the Flex
one out of there and let's see what
happens now that I told it to be a flex
element the main container here the side
on the left is this size the article on
the middle is this size so a bit bigger
quite a bit bigger and then the article
on the right side the aside on the right
side is quite a bit smaller because
there's less content so all this is
being intelligently calculated as best
as it possibly can by flexbox to try and
automatically size the elements based on
it just being a flex element but I want
to override that and tell it to be
specific so I'm gonna say flex for the
article I'm gonna say one I'll see what
that does nothing good because based on
the other two flex
it starts making things wonky which is
why we want to start adding some
percentages here so I'm gonna say 56%
and that's going to give it 56% of its
available of the available space for it
now the problem here is these asides are
throwing off this element here I don't
want it to be like this so let me just
first give it some margin so I'm gonna
say margin
let's go zero and 2% on the left and
right okay so the space on the bottom
here I don't really want that so I'm not
gonna write a shorthand I'm gonna say
margin left 2% margin right 2% that
should keep it there we go
the other nice thing about flexbox is do
you notice how these elements are
maintaining the same height as the
article how the aside despite this only
having this much content is still this
long which is as long as the article
which is as long as the other aside and
that's the other cool thing so if you
wanted a background like on these
elements that to maintain the same
height as the the growing content it's
very easily and automatically done
without you having to do anything in
flexbox so that's cool so let's move on
down to fix those asides because I don't
like how they look layout to a side side
nav and the sidebar now if I just say
flex one so they fit their available
space let's see what that does
so now things are looking weird because
now I have these looking way too small
but I can override that and say 20
percent so each of those are going to
fit about the 20% of its available
content just like that now they are
identical widths with space in between
the article and just like that I've
coated up this beautiful three column
multi width layout just using a couple a
couple of selectors here so that's
really cool now let's move down to
layout number three now we're gonna say
is we're gonna say layout three header
that's gonna be display flex again of
course and then flex direction
rrrow reverse is what we're gonna do
play around with it a little bit now
let's say lay out three header and we're
going to select that nav we're gonna
tell it to be flex of one and let's see
what that does and you can see that the
logo is on the right because we said row
reverse if I just said row that logos on
the on the left side but I want on the
right I don't change the mark up at all
the order of the mark up I'm just using
flexbox to tell it where to go I want a
little bit of space however let's say
margin right from that nav to percents
keep everything within the same
percentage convention okay and now let's
play with those articles are going to
say layout three and the class of
articles which is the wrapper around the
three articles there's a div with the
class of articles and I'm gonna say
display flex and then flex direction row
then we're going to say layout three
article we're selecting each individual
article like this flex one save that and
now each of these three articles have
the exact same they take the exact same
amount of space because they are the
same element and they have a flex of one
but I want some space between them so
I'm going to say margin zero and two
percent on the left and right now they
all have margin zero two percent on the
left and right problem is I don't want
that on the first element on the left
side and I don't want it on the last
element on the right side it's a little
bit of simple CSS trickery here css3
trickery rather layout 3 article first
child and article last child simply
gonna say margin zero
I want no margin on those specific
styles elements and there it is right
there
now it's equally distributed with some
2% margin in between I love it okay so
now let's just do some simple responsive
like a simple responsive fallback
because right now everything's just
going
flex hence flexbox and will always
retain that layout problem with that is
that doesn't look good so all we're
gonna do here is have some simple fall
backs here let's say responsive fall
back and we're gonna say media screen
and max width 768 pixels pretty standard
width for while phones are getting so
large now that that's probably the
tiniest iPhones portrait but really that
is the landscape of iPhones and similar
sized
devices it's not based on the physical
size of the device it's based on the the
pixel size and the pixel ratio within
that because we have Retina screens and
everything and gets confusing when
responsive media queries first came out
and screens were very simple this it was
quite easy but responsive media queries
have started to get a little bit more
complicated with the rise of high
resolution screens anyway I digress
let's make these things vertically stack
when you get to 768 max width so we're
simply just going to select all of the
main the article let's put this all in
one line article aside header and we
also have logo we have side nav I'm just
taking all the styles all the elements
that we styled and sidebar and we also
have articles woops
that is all of the elements that we've
used those are all the elements we've
used and we're going to say
display:block so no longer flex
float:none width 100% margin zero zero
two percent on the bottom so everything
stacks and has some space that's it so
let's see what happens when we go down
to 768 or less no dice and the reason
why is because these are not specific
enough selectors so each of these need
to have I could just say important
important important but that's lazy I'm
gonna have to write more specific styles
within here so bear with me I'm gonna
write a layout one two and three styles
for every single one of these elements
so I'm gonna fast forward this but you
will do the same
[Music]
alright there it is Leia one main
article side to header blah blah blah
blah blah
every selector that we did I'm just Rhys
electing them there because I'm just
gonna make them all do the same thing
refresh now if I go to resize this to
768 or less BAM they all vertically
stack just like that nice and simple
fallback solution and that my friends is
it for today's little sample of modern
layouts with flexbox I hope you enjoyed
it I was excited to share this one with
you and as for that article make sure
you check out Chris coiours complete
guide to flexbox gonna put that link up
here on the screen and go ahead and read
through that play around with it right
here within your sandbox and see what
you can understand about flex bucks it's
really amazing don't be afraid if you
feel like it's new and and you don't
really know if you can if you can learn
anything new or if it's complicated
trust me
spend some time you'll figure it out and
it will be worth it see you tomorrow and
day number 23 bye now
[Music]