Coding

CSS Flexbox Tutorial for Beginners | Basics & Container | 1/2

  • 00:00:01 hello and welcome back to the serious in
  • 00:00:03 this in the next video we will have a
  • 00:00:06 look at flexbox flexbox stands for
  • 00:00:08 flexible box layout module not the best
  • 00:00:11 name maybe but flex box is really
  • 00:00:14 awesome because flex box allows us to
  • 00:00:17 display our elements on our website more
  • 00:00:20 dynamically or more flexible and this is
  • 00:00:23 really important especially nowadays
  • 00:00:25 when we have all these different devices
  • 00:00:27 which we want to use to access our
  • 00:00:30 websites like laptops tablets
  • 00:00:32 smartphones and so on and because of
  • 00:00:34 that we need a responsive website and
  • 00:00:38 this is what we can do with flex box so
  • 00:00:41 let's have a look at that in this and
  • 00:00:42 the next video
  • 00:00:47 so as I said flexbox is awesome but
  • 00:00:50 first we have to understand some theory
  • 00:00:52 behind it so how it actually works and
  • 00:00:54 it all starts right here with a specific
  • 00:00:56 property because what you want to do is
  • 00:00:59 you want to add the way an element is
  • 00:01:01 displayed and what you do then is while
  • 00:01:03 you add the property names display to
  • 00:01:06 this element so far so clear and we had
  • 00:01:09 different values for that this could be
  • 00:01:11 block or inline now if you don't add
  • 00:01:13 block or inline but this one right here
  • 00:01:16 flex then you change this behavior of
  • 00:01:20 this element basically because you turn
  • 00:01:22 the element you added this declaration
  • 00:01:24 to into this you turn this element into
  • 00:01:27 a parent or into a Flex container well a
  • 00:01:31 Nesta name says a container normally
  • 00:01:34 contains something in this something are
  • 00:01:38 the children or the so called flex items
  • 00:01:41 and that's the important core concept of
  • 00:01:44 flex box that you have to understand
  • 00:01:45 because you always add display flags to
  • 00:01:49 your parent element or kind of the
  • 00:01:51 wrapping element and by that you turn
  • 00:01:53 this parent or as I said this wrapping
  • 00:01:56 element into the Flex container and
  • 00:01:58 inside this container you then have all
  • 00:02:01 these different flex items so the Flex
  • 00:02:03 items are basically nested elements into
  • 00:02:07 this or inside of this parent element so
  • 00:02:10 that's important to keep in mind now as
  • 00:02:12 soon as we get this we can add more
  • 00:02:14 properties to our Flex container this
  • 00:02:16 could be flex flow justify content align
  • 00:02:19 content or align items we can of course
  • 00:02:22 also add more properties to our Flex
  • 00:02:25 items this properties can be order flex
  • 00:02:28 or align self and now at this point it's
  • 00:02:34 probably confusing therefore let's
  • 00:02:36 forget about that for a second so about
  • 00:02:38 these properties for the Flex items and
  • 00:02:40 talked about these in the next video and
  • 00:02:43 in this video we will just focus onto
  • 00:02:45 the Flex container so how it works how
  • 00:02:48 we can create it and what happens if we
  • 00:02:50 add all these different properties and
  • 00:02:52 with that we got the basic theory set
  • 00:02:55 and this means we cannot jump straight
  • 00:02:58 into the code of our example page and
  • 00:03:00 see
  • 00:03:00 how this all works so let's have a quick
  • 00:03:02 look at the code which you can of course
  • 00:03:04 as always find down there in every
  • 00:03:07 description or a link to the code and
  • 00:03:09 what we can see in the HTML file is
  • 00:03:12 basically this div with the class parent
  • 00:03:15 this will become our Flex container you
  • 00:03:18 remember back what we saw on the slide a
  • 00:03:19 few seconds ago and inside this div we
  • 00:03:23 have six other divs this will become our
  • 00:03:25 Flex items we also saw that before but
  • 00:03:29 we'll talk about the details regarding
  • 00:03:31 the different Flex items in the next
  • 00:03:33 video in this video we will only focus
  • 00:03:36 onto the properties that we can add to
  • 00:03:39 this parent class right here so talking
  • 00:03:42 about properties let's go to our CSS
  • 00:03:45 file right here and here you can see I
  • 00:03:47 just added some basic styling to HTML
  • 00:03:50 and body and here I indicate that we
  • 00:03:52 start with Flex box and actually we will
  • 00:03:56 only work right here in our parent so
  • 00:03:59 this will be the only rule or rule set
  • 00:04:01 we will work with now in this video and
  • 00:04:03 down here you can see the styling for
  • 00:04:06 the different divs important as you can
  • 00:04:09 see for the one I didn't add any height
  • 00:04:11 or width to it for the second if I edit
  • 00:04:14 a width of 450 pixels and a font size
  • 00:04:16 you will see later why this is important
  • 00:04:19 at least for what we want to show right
  • 00:04:20 here then you can see in the furtive
  • 00:04:22 that I added a height of 150 so here
  • 00:04:25 would here the height in the for edit
  • 00:04:28 width and height so both and the five
  • 00:04:30 and six only has a width of 200 pixels
  • 00:04:32 so that's our basic setup we will work
  • 00:04:35 roof but as I said the focus will be
  • 00:04:37 right here in our parent or on our
  • 00:04:39 parent now what does look like on the
  • 00:04:42 website well it looks like this
  • 00:04:44 basically here we have our six stiffs
  • 00:04:46 and as you can see the content of the
  • 00:04:48 div always indicates the height and
  • 00:04:50 width property that was applied who so
  • 00:04:53 that's the basic setup I think now it's
  • 00:04:55 time to go back to our code and have a
  • 00:04:57 look at flexbox finally so in the code
  • 00:05:00 we will add this play flex right here to
  • 00:05:06 our parent element and that's really
  • 00:05:08 important although I'm repeating myself
  • 00:05:10 but I want to make sure that you really
  • 00:05:12 see how this works
  • 00:05:14 this is now becoming our flex container
  • 00:05:17 and all these this right here which are
  • 00:05:20 nested inside this element you can see
  • 00:05:23 it right here we have the Deaf class
  • 00:05:25 parent st well parent then and inside
  • 00:05:28 this parent we have all these divs so
  • 00:05:31 flex items flex container keep that in
  • 00:05:34 mind however we are back right here and
  • 00:05:36 we need to save this now so we just
  • 00:05:39 added display flex right there and if we
  • 00:05:41 go back and now reload the page well you
  • 00:05:45 can see something really interesting
  • 00:05:46 right because all our divs which were
  • 00:05:49 still are actually block level elements
  • 00:05:52 are now displayed in one single row
  • 00:05:55 that's really interesting what is even
  • 00:05:57 more interesting is that if I decrease
  • 00:05:59 the size you can see that the width of
  • 00:06:02 the elements decreases as far as
  • 00:06:05 possible and as far as possible means up
  • 00:06:08 until the point where the content
  • 00:06:10 basically needs the space you can see it
  • 00:06:12 right here and right there if I increase
  • 00:06:15 our side you can see that all the
  • 00:06:18 elements are increasing up to the point
  • 00:06:20 where they reach their defined maximum
  • 00:06:22 if we inspect that we can see that now
  • 00:06:25 this box has a width of 200 same is true
  • 00:06:27 for here here we have 150 here we have
  • 00:06:30 still the initial value so only the
  • 00:06:31 value or the width the content needs
  • 00:06:33 here we have 150 and here we have the
  • 00:06:36 same thing just a word that the actual
  • 00:06:38 content needs and also important our
  • 00:06:40 parents are a div with the class parent
  • 00:06:43 is also behaving like a block level
  • 00:06:45 element so it increases and decreases
  • 00:06:47 the size depending on our website with
  • 00:06:50 so that's what happens basically when we
  • 00:06:53 use display flags there is more that's
  • 00:06:56 happening right here but we'll have a
  • 00:06:58 look at that step by step throughout
  • 00:07:00 this video so let's go back to the code
  • 00:07:02 now and change this value from display
  • 00:07:04 flags to display inline flags right here
  • 00:07:08 if we save that and go back and reload
  • 00:07:11 the page we can immediately see what
  • 00:07:14 happens to our parent our parent now
  • 00:07:16 behaves like an inline element this
  • 00:07:19 means it doesn't occupy the entire space
  • 00:07:21 anymore let me maybe unselect the
  • 00:07:23 inspect tool here it only needs the
  • 00:07:25 space that is required to display the
  • 00:07:27 content
  • 00:07:28 just a normal inland element behavior
  • 00:07:30 basically more interesting also is that
  • 00:07:32 if I decrease the size now you can see
  • 00:07:35 that our elements are not decreasing the
  • 00:07:39 width they just keep their width and if
  • 00:07:41 I decrease the size more well you can
  • 00:07:43 see that all our elements are basically
  • 00:07:45 hidden so this is what happens if I use
  • 00:07:48 the inline flex value for our display
  • 00:07:51 property now I don't think that's what
  • 00:07:53 we want so let's change it back to flex
  • 00:07:55 right here like that and save it
  • 00:07:59 so if we go back now we can see that it
  • 00:08:02 behaves like we had it before this is
  • 00:08:05 nice but that's of course not everything
  • 00:08:07 we can do with flexbox because with that
  • 00:08:08 we now just defined that this should be
  • 00:08:11 our Flex container but of course now we
  • 00:08:14 have lots of possibilities how to change
  • 00:08:16 the way these flex items behave and to
  • 00:08:19 see that we will add another property
  • 00:08:22 and this property is called flex flow
  • 00:08:26 like that and these standard values
  • 00:08:29 because we will need two values for the
  • 00:08:31 Flex flow our row and no rap this one
  • 00:08:35 right here now why am i adding two
  • 00:08:39 values here well the reason is simple
  • 00:08:41 this flex flow property combines two
  • 00:08:45 separate properties which you could also
  • 00:08:47 use but I like to use this combined flex
  • 00:08:49 flow property and which properties are
  • 00:08:52 these actually well let me comment this
  • 00:08:54 maybe right here Rho simply refers to
  • 00:08:57 the Flex Direction property and no rep
  • 00:09:01 so the second value refers to flex rep
  • 00:09:05 well kind of intuitive actually like
  • 00:09:07 that as I said you can also write these
  • 00:09:10 two properties separately but I'll stick
  • 00:09:12 to flex flow because I think it's easier
  • 00:09:14 to use however if we save that and go
  • 00:09:17 back and reload our page we can see that
  • 00:09:21 the behavior is exactly the way it was
  • 00:09:23 before because as I said this is the
  • 00:09:25 standard value or these are the standard
  • 00:09:27 values however let's change that now and
  • 00:09:31 let me start with the second value with
  • 00:09:33 no rep so let's change the Flex rep
  • 00:09:36 property because if we have no rep right
  • 00:09:38 here well we can also have rap of course
  • 00:09:41 if we save that and go back then we'll
  • 00:09:44 see something interesting because if you
  • 00:09:46 look the page you can see well nothing
  • 00:09:49 happens that's not really interesting
  • 00:09:51 but if I now decrease the size of the
  • 00:09:54 page can you see it now our elements
  • 00:09:58 will wrap as the name says and what does
  • 00:10:02 rep mean here well it basically simply
  • 00:10:05 wraps as soon as we reached a point
  • 00:10:07 where it would have to reduce the width
  • 00:10:09 of our items as you can see it keeps the
  • 00:10:12 200 width of our width 200 pixels items
  • 00:10:15 down there if I wrap that further you
  • 00:10:18 can see that it keeps that width and
  • 00:10:21 then comes finally the point where it
  • 00:10:24 decreases the size of these elements as
  • 00:10:27 you can see it cannot decrease that size
  • 00:10:29 right here because the content simply
  • 00:10:31 occupies that space but that's basically
  • 00:10:34 how Rev works and there is also another
  • 00:10:37 important thing that you might see
  • 00:10:39 already and we'll talk about that in a
  • 00:10:41 few seconds you can also see that if you
  • 00:10:44 look at the last two elements you can
  • 00:10:47 see that now the height of this element
  • 00:10:49 decreased significantly because right
  • 00:10:52 here we have a height of 150 pixels
  • 00:10:55 although we didn't define any height but
  • 00:10:57 for this element now when it's wrapped
  • 00:10:59 it only has the height of 18 point 5
  • 00:11:01 pixels so the value it needs to display
  • 00:11:03 the content and that's also something
  • 00:11:05 really interesting but this is also
  • 00:11:08 something that we can change as I said
  • 00:11:10 we'll talk about that in a few seconds
  • 00:11:12 the main thing that changed now is that
  • 00:11:14 adding wrap as a value for the Flex wrap
  • 00:11:17 property allows us to well let our items
  • 00:11:21 wrap we also have another option right
  • 00:11:23 here we can also use you can see it
  • 00:11:25 already wrap reverse if we use that and
  • 00:11:27 go back and reload the page like this we
  • 00:11:32 can see that if we now decrease the size
  • 00:11:33 it wraps well reverse as the name says
  • 00:11:36 now our two elements right here are on
  • 00:11:39 top and if one right here is at the
  • 00:11:42 bottom almost something you can use just
  • 00:11:45 by simply changing the value that we
  • 00:11:47 have right here however I will stick to
  • 00:11:50 wrap because I think that's the more
  • 00:11:52 intuitive and maybe normal way that you
  • 00:11:54 would expect
  • 00:11:55 to happen to your elements if you want
  • 00:11:58 to wrap it however we also have this one
  • 00:12:01 flex direction so this value right there
  • 00:12:04 and the standard value is Rho but as you
  • 00:12:07 can imagine you could also change that
  • 00:12:09 to column right here if we save that and
  • 00:12:12 go back to our page and reload it mu
  • 00:12:16 then we see actually a lot of
  • 00:12:19 interesting things because the main
  • 00:12:21 thing of course is that now it is
  • 00:12:23 displayed as a column again or the
  • 00:12:25 elements are displayed in a column again
  • 00:12:27 and this is more the behavior we know
  • 00:12:30 from the normal block level elements and
  • 00:12:32 if I decrease the width you can see it
  • 00:12:35 behaves just like we saw it before but
  • 00:12:38 right here the elements don't become
  • 00:12:41 smaller than the width that we defined
  • 00:12:44 so basically not only the widest display
  • 00:12:47 changed but also the behavior changed
  • 00:12:49 not it's interesting and also something
  • 00:12:52 we'll have a look at in the next minutes
  • 00:12:53 but there is more things we can change
  • 00:12:56 right here if we go back and change it
  • 00:12:58 from column to row reverse for example
  • 00:13:02 and save that and go back and reload the
  • 00:13:05 page we can now see that if we increase
  • 00:13:08 our page we have the same behavior we
  • 00:13:11 saw in the beginning referral but now
  • 00:13:13 from a reverse perspective so that's
  • 00:13:15 also possible and as you can see if we
  • 00:13:17 decrease the size you can see that our
  • 00:13:20 elements decrease until they reach the
  • 00:13:23 minimum width they need for the content
  • 00:13:26 let's increase that or let's maybe keep
  • 00:13:28 it like that
  • 00:13:29 this and let's not change it to as you
  • 00:13:32 can imagine column reverse like that and
  • 00:13:36 let's go back and reload the page and as
  • 00:13:41 you can see now it is displayed
  • 00:13:43 differently again now we see the phone
  • 00:13:45 right here and the elements are
  • 00:13:47 basically aligned to the left here and
  • 00:13:49 if I decrease the size you can see that
  • 00:13:52 again the width of the element stays the
  • 00:13:54 way it was defined initially now this
  • 00:13:58 can be really confusing so this whole
  • 00:14:00 row column reverse column reverse
  • 00:14:02 roofing and there is also a really
  • 00:14:05 important aspect included into that that
  • 00:14:08 you have to understand
  • 00:14:09 to make sure that you can use flexbox
  • 00:14:11 and because of that it's now time to go
  • 00:14:14 back to theory again to understand what
  • 00:14:17 actually happened here because the main
  • 00:14:19 thing you have to understand right here
  • 00:14:21 is nine X's versus cross X's now it gets
  • 00:14:26 even more confusing but let's have a
  • 00:14:27 look at it
  • 00:14:28 step by step so first we have this thing
  • 00:14:31 right here this is basically our website
  • 00:14:33 or to be more precise this is our flex
  • 00:14:36 container now what we did we added flex
  • 00:14:39 direction you remember flex flow the
  • 00:14:41 first value this is the Flex Direction
  • 00:14:44 property now we add the value of Rho in
  • 00:14:47 the beginning this was the default value
  • 00:14:49 that we had what does this mean for our
  • 00:14:51 container for our Flex container well
  • 00:14:54 this basically means that the main axis
  • 00:14:57 goes from the top left corner to the
  • 00:15:00 right as indicated by the arrow that's
  • 00:15:02 the main axis just keep that in mind and
  • 00:15:04 if we have a main axis then we also have
  • 00:15:07 a cross axis and the cross axis starts
  • 00:15:10 at the same position as the main axis
  • 00:15:12 but still goes downwards of course so
  • 00:15:15 that's the basic setup we saw in the
  • 00:15:17 beginning now we can also change that
  • 00:15:20 because we saw that we didn't only have
  • 00:15:22 Rho we also had Rho reverse now what
  • 00:15:25 does this mean well Rho reverse simply
  • 00:15:29 means this right here our main axis now
  • 00:15:32 starts in the right top corner because
  • 00:15:35 if the normal row is from left to right
  • 00:15:38 from the top left to the top right then
  • 00:15:40 Rho reverse well this should be from the
  • 00:15:42 top right to the top left corner of our
  • 00:15:45 containing of our Flex container so this
  • 00:15:48 is the main axis then and this is the
  • 00:15:50 cross axis so this is what happens
  • 00:15:52 between Rho and Rho reverse let's go
  • 00:15:55 back to the code and try this out once
  • 00:15:57 again to make sure we understand that so
  • 00:16:00 back in the code now we will add row
  • 00:16:02 once again like this
  • 00:16:04 go back and increase the size maybe like
  • 00:16:09 this and reload the page so we know that
  • 00:16:11 we now set our Flex flow to row and so D
  • 00:16:15 main axis starts right here in the top
  • 00:16:18 left corner and goes from left to right
  • 00:16:20 across axis then
  • 00:16:23 goes from top to bottom you cannot see
  • 00:16:25 it right here but that's just what it is
  • 00:16:26 now if we change it if you go back and
  • 00:16:29 change it to row reverse save that and
  • 00:16:32 go back again you can see that now if
  • 00:16:36 one starts right here in the right top
  • 00:16:39 corner so it goes from left sorry from
  • 00:16:41 right to left right here and the cross
  • 00:16:43 X's goes down here and if you don't
  • 00:16:47 believe me with the cross axis we can
  • 00:16:49 simply decrease the size or the width
  • 00:16:51 fear as you can see it like that and as
  • 00:16:55 you can see the elements start right
  • 00:16:57 here and they are all aligned to the
  • 00:16:59 right basically so to the cross axis if
  • 00:17:02 we go back and change it back to row
  • 00:17:04 right here
  • 00:17:06 oops sorry without the e and go back
  • 00:17:08 again and reload the page now everything
  • 00:17:11 is aligned right here to the left
  • 00:17:12 basically because now our cross axis
  • 00:17:14 starts in the top left corner so that's
  • 00:17:18 the first thing that's row versus row
  • 00:17:20 reverse let's increase the size let's
  • 00:17:23 maybe keep it like that because if we
  • 00:17:25 now go back to our slide and now have a
  • 00:17:27 look at two more examples and the first
  • 00:17:30 one is this right here we have 2 flex
  • 00:17:31 direction of column now can you imagine
  • 00:17:35 what happens then to our to access that
  • 00:17:37 we have I hope you can maybe you can't
  • 00:17:39 no problem because what happens now is
  • 00:17:41 that our main axis now goes from the top
  • 00:17:44 left corner to the bottom so not anymore
  • 00:17:47 from the top left corner to the right
  • 00:17:48 because we changed the way or we change
  • 00:17:51 our two axes with that column value and
  • 00:17:54 if the main axis goes from top left to
  • 00:17:58 bottom then the cross axis has to go
  • 00:18:01 from the top left to the right now if we
  • 00:18:04 continue that and think about that from
  • 00:18:06 one last perspective this would be flex
  • 00:18:09 direction column reverse can you imagine
  • 00:18:12 now what happens well maybe you can
  • 00:18:14 because what simply happens now is that
  • 00:18:16 column reverse simply goes from the
  • 00:18:19 bottom left corner because remember with
  • 00:18:21 column we started in the top left corner
  • 00:18:24 and went to the bottom left corner and
  • 00:18:26 column reverse then well this means that
  • 00:18:28 across axis has to start in the bottom
  • 00:18:31 left corner and go up to the top left
  • 00:18:34 corner again
  • 00:18:36 and this also means that our starting
  • 00:18:38 point for this two axis is now the
  • 00:18:40 bottom left corner and therefore the
  • 00:18:43 cross axis will also start there so this
  • 00:18:47 is basically what you have to keep in
  • 00:18:49 mind and the easiest thing to remember
  • 00:18:52 that is actually that the starting point
  • 00:18:56 so the initial starting point for the
  • 00:18:58 standard value which is Rho is the top
  • 00:19:00 left corner of your Flex container so if
  • 00:19:03 you add a value of Rho you start right
  • 00:19:05 there with the main axis going from left
  • 00:19:07 to right if you take Rho reverse you
  • 00:19:09 still stay in the top corner but then
  • 00:19:12 you start reverse so you start in the
  • 00:19:14 right top corner if you define column as
  • 00:19:17 a value well the starting point is still
  • 00:19:20 the top-left corner but now your main
  • 00:19:22 axis doesn't go to the right but it goes
  • 00:19:25 down and finally if you have a value of
  • 00:19:27 column reverse well then your starting
  • 00:19:30 point initially is the top left corner
  • 00:19:32 but as you have reverse you just have to
  • 00:19:34 go down to the bottom left corner and
  • 00:19:36 then go up again to define the main axis
  • 00:19:39 so then the bottom left corner is your
  • 00:19:42 starting point so as I said try to keep
  • 00:19:44 that schema in mind because it helps you
  • 00:19:47 a lot to understand how flexbox actually
  • 00:19:49 works and if you now go back to our code
  • 00:19:52 and now change Row two column like that
  • 00:19:56 go back and reload the page you can see
  • 00:20:00 that our items now behave differently
  • 00:20:02 and if we change it to column reverse
  • 00:20:06 right here like that then you can see
  • 00:20:10 that it starts in the bottom left corner
  • 00:20:13 as I show you and goes up to the top so
  • 00:20:16 that's basically this core concept
  • 00:20:19 behind the Flex direction and this is
  • 00:20:22 really important because the direction
  • 00:20:24 or the position of the main and cross
  • 00:20:26 axis has a lot of impact or consequences
  • 00:20:30 for other properties that we can use for
  • 00:20:33 example if we have a look at our website
  • 00:20:36 again and change it back to column right
  • 00:20:40 here that we load that you can see that
  • 00:20:46 basically the width the maximum width
  • 00:20:49 right
  • 00:20:50 simply answered 150 150 200 200 we
  • 00:20:54 sought it already but if I change it now
  • 00:20:57 to row to row right there and reload the
  • 00:21:02 page and increase the size you can see
  • 00:21:06 that the height of all our elements is
  • 00:21:09 kind of well stretched to fit the entire
  • 00:21:12 Flex container and this behavior can be
  • 00:21:17 changed of course and to understand this
  • 00:21:19 behavior we need more properties and we
  • 00:21:22 need to understand what we just saw
  • 00:21:24 about the main axis and the cross axis
  • 00:21:26 so let's have a look at these properties
  • 00:21:28 now because the properties we can add or
  • 00:21:32 will add are the following ones it's a
  • 00:21:34 line items and it's justify content so
  • 00:21:39 two more properties now what does this
  • 00:21:41 mean what are these properties doing
  • 00:21:43 let's have a look at it in an example
  • 00:21:45 because this tenet value for online
  • 00:21:47 items is this one stretch so if we save
  • 00:21:51 that and go back and we load the page we
  • 00:21:55 can see that nothing is happening but if
  • 00:21:58 I go back now and change stretch to
  • 00:22:02 Center save that go back then you can
  • 00:22:09 see something interesting because right
  • 00:22:11 now the height of these elements is just
  • 00:22:15 the height that is required to display
  • 00:22:17 the content so it's not well s devalue
  • 00:22:20 said stretched to the maximum anymore so
  • 00:22:23 aligned items
  • 00:22:24 seems to have an impact on to the height
  • 00:22:27 of our elements and I must say that this
  • 00:22:29 is totally wrong so don't remember that
  • 00:22:32 I just said that because this is what
  • 00:22:34 you could see right here because if I
  • 00:22:36 simply change now our Flex flow from row
  • 00:22:39 2 column
  • 00:22:40 oops right here to column and reload the
  • 00:22:43 page can you see what happens it's not
  • 00:22:47 the impact on to the height as you might
  • 00:22:49 have thought it now is an impact on to
  • 00:22:52 the way our elements at this plate on
  • 00:22:54 our website regarding the position and
  • 00:22:57 in this case it's the center position
  • 00:22:59 and why is it then not referring to the
  • 00:23:02 height as I just said
  • 00:23:03 would be wrong because a line items only
  • 00:23:08 refers to the position of our items
  • 00:23:11 relating to the cross axis you remember
  • 00:23:15 the cross axis now goes from left to
  • 00:23:19 right because we defined a flex
  • 00:23:22 direction of column so this means our
  • 00:23:25 main axis goes down here and the cross
  • 00:23:28 axis goes right here from left to right
  • 00:23:30 and we defined a value for aligned items
  • 00:23:34 so you can remember that as aligned
  • 00:23:36 items along of the cross axis of sender
  • 00:23:39 this means if I now change that value to
  • 00:23:43 flex start for example and save that go
  • 00:23:47 back right here then it's aligned to the
  • 00:23:50 right because you remember our starting
  • 00:23:52 point is right here in the top left
  • 00:23:54 corner we have the main axis going down
  • 00:23:57 right there but that doesn't have an
  • 00:23:59 impact for online items and we have our
  • 00:24:01 cross axis starting right here so this
  • 00:24:03 is the starting point and flex start
  • 00:24:05 simply means okay position the items
  • 00:24:08 right here at the beginning of our cross
  • 00:24:10 axis mainly now if we go back and change
  • 00:24:14 flex flow from column to row once again
  • 00:24:17 and save that and reload the page then
  • 00:24:20 the behavior changes again because now
  • 00:24:23 our main axis starts right here from
  • 00:24:27 here to here from left to right and our
  • 00:24:30 cross axis goes from top to bottom right
  • 00:24:33 there and this means the cross axis
  • 00:24:35 starts right here so the starting point
  • 00:24:37 is right there at this part this means
  • 00:24:41 if I change aligned items back again to
  • 00:24:44 Center like that and save it then we are
  • 00:24:49 centered because again starting point of
  • 00:24:51 the cross axis and point of the cross
  • 00:24:54 axis center of the cross axis this is
  • 00:24:57 basically what a line items do so keep
  • 00:25:00 in mind a line items refers to the cross
  • 00:25:03 axis that's really important now you
  • 00:25:06 might say okay I got there I understand
  • 00:25:08 that the position of the cross axis
  • 00:25:10 changes depending on the flex direction
  • 00:25:12 and that we can change the behavior of
  • 00:25:15 the items in relation or in
  • 00:25:17 direction of the cross axis with aligned
  • 00:25:20 items but what about the main axis then
  • 00:25:23 good question actually and the main axis
  • 00:25:26 can of course also be changed or the
  • 00:25:28 behavior of the items in relation to the
  • 00:25:31 main axis and this can be done with
  • 00:25:33 justify content right here because if we
  • 00:25:37 now add justified content Center for
  • 00:25:39 example right here and save that go back
  • 00:25:43 we can see that our items are now
  • 00:25:47 centered if you can see that more maybe
  • 00:25:50 are now centered along the main axis
  • 00:25:54 again keep in mind flex Direction is row
  • 00:25:57 main axis goes from left to right and
  • 00:26:00 justified content refers to the
  • 00:26:03 positioning of the items along our main
  • 00:26:06 axis so if I now change Center to flex
  • 00:26:10 star or flex end maybe would be smarter
  • 00:26:13 I think like that and if we go back and
  • 00:26:17 reload the page you can see that now our
  • 00:26:21 items I can increase it anymore sorry
  • 00:26:23 but you can now see that our items are
  • 00:26:25 now positioned at the end of our main
  • 00:26:29 axis and if we now add another thing if
  • 00:26:33 you know add a height for our Flex
  • 00:26:36 container of I don't know maybe 600
  • 00:26:39 pixels like that and reload the page
  • 00:26:43 maybe that's that's too big I'm sorry
  • 00:26:46 let's make 500 maybe I think that we can
  • 00:26:48 see better yeah then you can see it
  • 00:26:51 better maybe because if I decrease the
  • 00:26:53 size so let's keep it like that and if I
  • 00:26:55 now write Flex start right here for a
  • 00:27:00 line items and go back you can see that
  • 00:27:04 now aligned items so the positioning
  • 00:27:07 along the cross axis so here to here is
  • 00:27:10 start at the beginning anti position of
  • 00:27:14 our items in relation to the main axis
  • 00:27:17 so left to right in our case is now flex
  • 00:27:21 and this is defined by justified content
  • 00:27:23 you can see it ends right here we have a
  • 00:27:25 gap in the beginning and justify content
  • 00:27:28 just says that now if we set both to
  • 00:27:30 Center works
  • 00:27:31 again like this and like that then we
  • 00:27:36 can see that the entire content is
  • 00:27:39 basically centered and looks like that
  • 00:27:42 so this is what it basically looks like
  • 00:27:44 and I know that this can be kind of
  • 00:27:47 abstract in the beginning therefore
  • 00:27:49 let's have a quick look at a slide that
  • 00:27:52 summarizes kind of what we saw right
  • 00:27:54 here in this practical example because
  • 00:27:57 basically what happened now of what we
  • 00:27:59 talked about now is the following we
  • 00:28:01 have the Flex direction of rosette for
  • 00:28:04 example this means we have our website
  • 00:28:06 and on our website we have the main
  • 00:28:08 access starting in the top left corner
  • 00:28:11 we talked about that anti cross axis
  • 00:28:13 also starting in the top left corner but
  • 00:28:16 going from top to bottom we saw that and
  • 00:28:18 we know that already
  • 00:28:19 what happens now with justified content
  • 00:28:21 and the line items is the following with
  • 00:28:24 justified content we define the position
  • 00:28:27 of the elements along our main axis in
  • 00:28:30 this case and if this defines the main
  • 00:28:33 axis well aligned items simply defines
  • 00:28:36 the position along the cross axis this
  • 00:28:38 is what we just saw in this example now
  • 00:28:41 if we think back about that from the
  • 00:28:44 Flex Direction column perspective it
  • 00:28:46 slightly changes because our website
  • 00:28:48 looks like that and we now have the
  • 00:28:51 cross axis going from left to right
  • 00:28:53 that's a difference you remember because
  • 00:28:55 now we have the Flex direction column
  • 00:28:57 defined and this means the main axis
  • 00:28:59 goes from top to bottom and this also
  • 00:29:01 has an impact on to our illini 'tom and
  • 00:29:04 onto our justified content property
  • 00:29:06 because aligned items now refers to the
  • 00:29:09 cross axis but from left to right so how
  • 00:29:12 these items are positioned there and
  • 00:29:14 justify content refers to the main axis
  • 00:29:16 again but now this is referring from the
  • 00:29:19 top and bottom positioning basically
  • 00:29:21 right there
  • 00:29:21 so maybe also keep that in mind whenever
  • 00:29:24 you're confused what happens now
  • 00:29:26 regarding aligned items or justified
  • 00:29:29 content and this is actually it
  • 00:29:31 regarding these two properties now you
  • 00:29:33 might ask yourself okay I understood
  • 00:29:35 these properties but which values can I
  • 00:29:38 apply right here how can I play around
  • 00:29:40 with these different values and a good
  • 00:29:42 source for that is as quite often
  • 00:29:44 actually
  • 00:29:45 mdn the Mozilla developer Network if you
  • 00:29:48 look right here on to this page you can
  • 00:29:50 find a link to it down there in the
  • 00:29:52 video description also so if you scroll
  • 00:29:54 down a bit you can find some general
  • 00:29:56 information about flexbox right here but
  • 00:29:59 if you scroll down you can find all the
  • 00:30:01 different properties you have right here
  • 00:30:02 and in our case we used a line items for
  • 00:30:05 example and if you click onto that you
  • 00:30:07 can see all the different values you can
  • 00:30:09 use for align items now as you can
  • 00:30:12 imagine these are too much values to
  • 00:30:15 have a look at them throughout this
  • 00:30:16 video therefore you can just play around
  • 00:30:18 with them now because you have the
  • 00:30:20 theoretical background and there are
  • 00:30:23 also interesting ones for example
  • 00:30:24 baseline let's maybe try this one out
  • 00:30:27 quickly because if we add baseline right
  • 00:30:30 here as a value and save that and go
  • 00:30:32 back and reload the page you can see
  • 00:30:37 that now I hope it becomes clear right
  • 00:30:40 here that the items are now aligned
  • 00:30:43 based on their content so as you can see
  • 00:30:46 this is one line this is for example
  • 00:30:48 what baseline is doing maybe not the
  • 00:30:52 result you want to have right here I
  • 00:30:54 just wanted to show you that and how
  • 00:30:56 this works now we are almost done with
  • 00:30:58 the properties or with the core
  • 00:31:00 properties that we can use for our Flex
  • 00:31:03 container but there is one more
  • 00:31:05 interesting thing that I would like to
  • 00:31:07 show you and this thing is called align
  • 00:31:11 content now you might say okay we got a
  • 00:31:13 line items we got a line you got
  • 00:31:15 justified content what is that now well
  • 00:31:18 let's maybe start with our center value
  • 00:31:21 again
  • 00:31:22 because we know that already if we save
  • 00:31:24 that and go back well we can see that
  • 00:31:27 it's centers now but this is nothing to
  • 00:31:28 do with this new value let me maybe undo
  • 00:31:31 it and save it as you can see this is
  • 00:31:34 not related to that but if I add Center
  • 00:31:37 once again like that and reload the page
  • 00:31:40 and if I decrease the size of our
  • 00:31:42 website you can already see what happens
  • 00:31:45 because with align content we can define
  • 00:31:49 what happens with extra space that we
  • 00:31:53 have in relation to our cross access so
  • 00:31:56 from top to bottom if I go back right
  • 00:31:58 here
  • 00:31:59 and delete that save it you can see that
  • 00:32:03 it is displayed like that so we need
  • 00:32:05 more space by adding Center we say well
  • 00:32:09 as the name says just Center my items
  • 00:32:12 right here so it uses just the space
  • 00:32:14 right here and if I now changed it for
  • 00:32:17 example to a value like space between
  • 00:32:20 like this for example and go back and
  • 00:32:22 reload the page you can see that well as
  • 00:32:25 the name says there is a space between
  • 00:32:28 the first line and the second line
  • 00:32:29 really important for the property it
  • 00:32:32 only works if you have more than one
  • 00:32:34 line because if I increase the size now
  • 00:32:37 like this you can see that it basically
  • 00:32:40 doesn't have any effect right here on to
  • 00:32:43 the way our elements are displayed for
  • 00:32:45 example if I use flex start right here
  • 00:32:48 to show you that and save it and go back
  • 00:32:51 and reload the page you can see nothing
  • 00:32:53 changes but if I decrease the size you
  • 00:32:56 can see that our items are now displayed
  • 00:32:59 while at the beginning of our cross
  • 00:33:02 access right here and this is it
  • 00:33:04 actually this is the first part of our
  • 00:33:07 flexbox video series here I know that
  • 00:33:10 this can be quite confusing in the
  • 00:33:12 beginning but if you keep in mind what
  • 00:33:15 you can do with flex direction so
  • 00:33:17 basically change the starting point of
  • 00:33:20 your Flex container and bite at the
  • 00:33:23 starting point and the direction of your
  • 00:33:25 main axis and off your cross axis and if
  • 00:33:29 you then keep in mind what happens to
  • 00:33:31 align items so aligned items always
  • 00:33:34 refers to the positioning of your Flex
  • 00:33:37 items along the cross axis I cannot say
  • 00:33:41 like this like that because it depends
  • 00:33:42 but you know what I mean it's always
  • 00:33:44 related to the cross axis then you have
  • 00:33:47 justified content which always refers to
  • 00:33:49 the positioning of your items along the
  • 00:33:52 main axis and then you have align
  • 00:33:55 content which always refers to the cross
  • 00:33:58 axis but only in cases where you have
  • 00:34:00 items in more than one line so I hope
  • 00:34:03 with these examples and with this
  • 00:34:05 background knowledge you are not ready
  • 00:34:07 to start with Flex box and maybe use the
  • 00:34:10 code you can find right here as I said
  • 00:34:12 attach
  • 00:34:12 the video or the link is attached to the
  • 00:34:14 video to play around and to practice
  • 00:34:16 that also used to MDN and play around
  • 00:34:18 with the different values you can apply
  • 00:34:20 to your properties because in the end
  • 00:34:23 flexbox
  • 00:34:24 is really awesome it's really helpful
  • 00:34:26 and actually quite intuitive to use if
  • 00:34:30 you got the basic concept however this
  • 00:34:32 was just part one as I said because we
  • 00:34:35 now only applied properties to our Flex
  • 00:34:38 container but inside the Flex container
  • 00:34:41 we have all these different items and so
  • 00:34:43 far everything we changed affected all
  • 00:34:46 of the items but what if you want to be
  • 00:34:49 more precise what if you want to make
  • 00:34:52 sure that specific items inside your
  • 00:34:55 Flex container behave the way you want
  • 00:34:57 well then you also need to apply some
  • 00:34:59 properties to these items and we'll have
  • 00:35:02 a look at that in the next video of the
  • 00:35:04 series so I hope to see you there and as
  • 00:35:06 always I can only say thanks a lot for