Coding

Stylin’ Around – Flexbox Introduction – Part 1: The Flex Container

  • 00:00:00 everyone time to get flexible today
  • 00:00:04 we're going to dive into flex box which
  • 00:00:07 is a CSS concept or a display type like
  • 00:00:12 block or inline block which makes
  • 00:00:16 designing websites really really easier
  • 00:00:19 basically it's a concept where the
  • 00:00:23 container itself which is defined as a
  • 00:00:26 flex box will align its children so all
  • 00:00:30 elements within this container in a way
  • 00:00:33 we specify and which allows us to really
  • 00:00:36 well flexible position all those items
  • 00:00:39 and what we had to do in the past with
  • 00:00:42 floats and clear fixes and all kind of
  • 00:00:45 hacks and stuff is really really easier
  • 00:00:48 reflects box and so let's just get into
  • 00:00:51 it as you can see I got something
  • 00:00:53 prepared here on plunker it's just a
  • 00:00:56 basic HTML document and I get a
  • 00:01:00 container here with four elements
  • 00:01:04 operatives in this case inside it these
  • 00:01:08 two boxes are identical and I will play
  • 00:01:12 around with the bottom one and I we can
  • 00:01:14 always see the comparison to the top one
  • 00:01:16 now in our style that CSS oops both
  • 00:01:22 containers are declared as flex elements
  • 00:01:27 and that means they are flex boxes so to
  • 00:01:32 say and we need to set display flags to
  • 00:01:37 be able to use all the fun flex stuff on
  • 00:01:40 any items within them as well as the
  • 00:01:43 container itself otherwise this will not
  • 00:01:45 work now the first thing I'll show you
  • 00:01:48 is a property called flex direction and
  • 00:01:53 was what this property does is set the
  • 00:01:57 direction by which these elements will
  • 00:02:00 be ordered so right out of the box the
  • 00:02:04 Flex Direction is row and that means
  • 00:02:08 that these elements appear in columns in
  • 00:02:12 one row
  • 00:02:13 so to say it's one row so if I set us to
  • 00:02:18 row nothing will change now we also have
  • 00:02:23 ro reverse which means that the ordering
  • 00:02:28 is reversed and now we let all elements
  • 00:02:33 start at the right of our row and flow
  • 00:02:36 to the left so you can see the
  • 00:02:38 comparison to their normal arrow at the
  • 00:02:41 top as you might be able to think we not
  • 00:02:45 only got row we also got column with one
  • 00:02:51 L for better fitting and as you can see
  • 00:02:55 column will change it in that way that
  • 00:03:00 we only have one column and all elements
  • 00:03:04 will be stacked in rows within that
  • 00:03:07 column and as you might have already
  • 00:03:09 guessed we also got wrote a column re
  • 00:03:12 worse which is basically the same as
  • 00:03:15 relievers just in the column so with
  • 00:03:19 Flex direction we're really able to
  • 00:03:22 control the flow of our elements within
  • 00:03:25 a container and do easy reordering and
  • 00:03:29 stuff like this i watch just set it back
  • 00:03:32 to row for the moment and now I will
  • 00:03:37 change something in our index dot HTML
  • 00:03:39 and I will add some additional items
  • 00:03:53 okay so I now added some items and as
  • 00:03:56 you can see now the whole container is
  • 00:04:00 full and then we still have one row
  • 00:04:05 right now we can add flex rap rap to it
  • 00:04:12 and this will make it so that no longer
  • 00:04:16 will everything shrink like it is the
  • 00:04:20 case here but each block will contain
  • 00:04:23 through dimensions and instead the
  • 00:04:26 elements will wrap so in the top we get
  • 00:04:30 the case that flexbox will automatically
  • 00:04:34 shrink down our elements so they fit
  • 00:04:36 into your container well in the bottom
  • 00:04:39 it does not shrink anymore because we
  • 00:04:42 allow it to actually wrap now obviously
  • 00:04:47 we can also set it to no rap and get the
  • 00:04:49 behavior from before so the standard is
  • 00:04:52 no rap we also got rap reverse and as
  • 00:04:59 you can see this will reverse the
  • 00:05:02 ordering so now number one is the bottom
  • 00:05:05 left and then we go to the right until
  • 00:05:08 there is no space for number five to the
  • 00:05:11 right here and then it will be placed
  • 00:05:13 above so I'm not sure how often you're
  • 00:05:18 going to use rap reverse but you can't
  • 00:05:20 it's there now these two properties can
  • 00:05:25 also be written combined in just one
  • 00:05:27 property flats flow which allows us to
  • 00:05:31 specify first direction row and then if
  • 00:05:39 it is allowed to rap or not so I would
  • 00:05:42 just put it back to know rap for the
  • 00:05:43 moment now i'm just going to edit it
  • 00:05:48 back so that we have a little bit of
  • 00:05:50 extra space available
  • 00:05:56 just like that and now what if you want
  • 00:06:01 the content not to be stacked to the
  • 00:06:04 left but to stretch out over the whole
  • 00:06:07 area that's no problem with flexbox we
  • 00:06:11 can chest that just to find content to
  • 00:06:14 it and then we got several options here
  • 00:06:17 the default is flex start that's why
  • 00:06:21 nothing changed we can change it to flex
  • 00:06:24 and which will push it up to the right
  • 00:06:27 to the end of the container but we also
  • 00:06:31 get the possibility to set it to the
  • 00:06:33 center now we got equal Martians to the
  • 00:06:38 left and right we could also set it to
  • 00:06:41 space between which will align it to the
  • 00:06:47 very left and very right but leave equal
  • 00:06:49 Martians between the elements and we
  • 00:06:52 also enters the last possible well you
  • 00:06:55 have space around now this makes it that
  • 00:06:59 the first and last element aren't
  • 00:07:00 exactly aligned to the left and right
  • 00:07:02 but instead that everything is nicely
  • 00:07:05 spaced out so this is a really cool
  • 00:07:11 feature and I see that being used very
  • 00:07:13 often in the future because with justify
  • 00:07:16 content you're really able to create
  • 00:07:18 cool layouts flexible layouts nice
  • 00:07:20 navigation bars and don't have to use
  • 00:07:23 all those floats and stuff which right
  • 00:07:26 more than often mess up anything in your
  • 00:07:30 layout so that is a really cool feature
  • 00:07:31 I will just get rid of it so that we go
  • 00:07:36 back to our default and um let me show
  • 00:07:43 you another cool feature which is a line
  • 00:07:46 items so we just got justify content
  • 00:07:50 which aligns or which is spices the
  • 00:07:55 elements out and the width of our
  • 00:07:57 container so to say oh and that is very
  • 00:08:01 important to you it's only the width
  • 00:08:04 because we gotta flex flow flow of rows
  • 00:08:06 if we were to have a column flow
  • 00:08:10 then if you go back to justify content
  • 00:08:15 and set it to flex and it's no longer to
  • 00:08:21 the right but to the bottom so
  • 00:08:22 everything that was right for the
  • 00:08:27 horizontal dimension when we had row as
  • 00:08:31 direction will now be transformed to the
  • 00:08:35 vertical direction when we set the
  • 00:08:39 direction to column now back to row and
  • 00:08:44 align items now a line items allows us
  • 00:08:51 to specify how these elements will use
  • 00:08:58 the space they got in a vertical
  • 00:09:01 dimension or put an arrow word where
  • 00:09:05 it's how they will stretch out to the
  • 00:09:08 top and bottom if we have a direction of
  • 00:09:11 row or to the left and right if we have
  • 00:09:13 a direction of color so by default we
  • 00:09:19 have a value of stretch which means
  • 00:09:22 stretch out fill all the space you got
  • 00:09:25 but we can set it to flex start which
  • 00:09:30 means no only take your height and if we
  • 00:09:35 go back here and increase the height
  • 00:09:37 like like that we can see okay this one
  • 00:09:43 is higher than the other ones we all
  • 00:09:47 have flex end which pushes it to the
  • 00:09:51 bottom we get center
  • 00:09:58 and we got baseline baseline means it's
  • 00:10:05 aligned at the baseline of the text
  • 00:10:08 inside the content so as you can see the
  • 00:10:12 difference to flex start is that we got
  • 00:10:14 this little margin at the top here for
  • 00:10:16 the smaller containers because we're
  • 00:10:18 aligning here on the numbers and not on
  • 00:10:22 the top of our boxes now with justified
  • 00:10:28 content and the line items as well as to
  • 00:10:31 flex directions row and column we get a
  • 00:10:35 lot of possibilities to align and
  • 00:10:38 justify items and to really play around
  • 00:10:41 that is what makes flexbox really cool
  • 00:10:44 and yeah when it name say is flexible
  • 00:10:48 now I just added two new boxes five and
  • 00:10:52 six set the wrapping back to allow
  • 00:10:55 wrapping and also will set a line items
  • 00:10:58 to stretch so that in this case the
  • 00:11:01 height of all items takes all the
  • 00:11:04 available space now I did this to show
  • 00:11:11 you another property named align content
  • 00:11:15 align content works the following way we
  • 00:11:18 can also set flex start here and that
  • 00:11:22 means all items should be pushed up to
  • 00:11:29 the top and as you can see stretch does
  • 00:11:32 not work anymore because this kind of
  • 00:11:35 overrides that entails the item items
  • 00:11:38 how they shoot a line in this case
  • 00:11:41 vertically because always remember we
  • 00:11:43 got a direction of row if we change it
  • 00:11:47 to column get the same project picture
  • 00:11:50 horizontally
  • 00:11:57 we can also set it flex and which will
  • 00:12:01 align to the bottom of our container and
  • 00:12:04 we got also center stretch space around
  • 00:12:08 space between so this is equivalent of
  • 00:12:12 justify content just for the other axis
  • 00:12:16 where justified content would make sure
  • 00:12:20 that everything is well justified and
  • 00:12:25 spaced out in the direction we specified
  • 00:12:30 here so in one row for example a line
  • 00:12:33 content will do the same for the other
  • 00:12:37 axis so we got a direction of Rho online
  • 00:12:40 content will take care of the spacing in
  • 00:12:44 the column and wise words are if we had
  • 00:12:47 column here then align content with you
  • 00:12:51 to spacing in the row whereas justify
  • 00:12:55 content would take care of the column so
  • 00:12:59 you got line and justify content space
  • 00:13:06 between so this one is Rho access
  • 00:13:16 because of row direction and this one is
  • 00:13:23 the column access and also only because
  • 00:13:30 of row direction so this is really
  • 00:13:35 important that you don't get these mixed
  • 00:13:37 up but together you can make really cool
  • 00:13:40 things so that's it for the container
  • 00:13:43 flex classes and in the next video we're
  • 00:13:47 going to have a look at the children
  • 00:13:49 flex properties because remember that
  • 00:13:53 everything we did in this video was just
  • 00:13:56 inside the container class so all the
  • 00:13:59 flex properties we added and and and
  • 00:14:01 changed were part of the container and
  • 00:14:05 we didn't touch the children yet
  • 00:14:09 but there are some flex properties which
  • 00:14:12 have to be specified on the children on
  • 00:14:16 the individual boxes with in a flex
  • 00:14:20 container to work and we will look at
  • 00:14:23 this in the next video see you