Flexbox In Depth | Daryl Duckmanton | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

20 Lessons (2h 23m)
    • 1. Introduction

      1:50
    • 2. Tools and Resources

      4:09
    • 3. Flexbox 101

      5:27
    • 4. Creating a Flex Container

      2:46
    • 5. Changing the Main Axis Direction

      3:49
    • 6. Controlling the wrapping of Items

      5:47
    • 7. Setting Flex Flow

      3:24
    • 8. Justifying content along the Main Axis

      7:47
    • 9. Aligning content along the Cross Axis

      6:06
    • 10. Controlling Alignment of Wrapped Items

      9:59
    • 11. Ordering Flex Items

      10:06
    • 12. Controlling Flex Item Growth Basics

      7:49
    • 13. Flex Item Growth Ratios

      11:26
    • 14. Controlling Flex Item Shrinking

      10:32
    • 15. A review on Box-Sizing

      6:38
    • 16. Explicitly Sizing Flex Items

      11:06
    • 17. Flex Basis Gotchas

      8:38
    • 18. The Flex Property

      14:20
    • 19. Aligning Individual Flex Items

      3:00
    • 20. The Project Work

      8:44
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

61

Students

--

Projects

About This Class

In this class you will learn all about Flexbox and how to apply it to your websites. You will firstly learn what it is, then how to use it properly in great detail. You will then be given a set of tasks at the end of the class, building some different kinds of layouts. You will start with some simple layouts, and then move to some more complex ones.

Please check out the project details for more information on the types of layouts you will build in this class.

Meet Your Teacher

Teacher Profile Image

Daryl Duckmanton

Experience is our biggest asset

Teacher

I am a full stack web developer, who has been developing websites for 12 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular 2-7 in recent years, and also have approximately 12 years in ASP.NET.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello, everybody. And welcome to the class entitled Lex Box in Depth. So is this glassful. Well, it's for any Web designer, a Web developer at their who already have some reasonable knowledge. It high steam on, says says Now you don't need to be a guru in either of these two. Take this class. You think toe have some unstated off how currently works. And so, with this in mind, you're looking to a verbal knowledge in this. Is that spice? Especially obviously, in the flex box area. So you're looking to get a deeper understanding of flex box and how it's beneficial in the work that we do in the Web spice. So with all this in mind, what do you get by taking this class? Well, I can promise you you'll get a strong understanding of what floods books is, how to use it and went teas. On top of this, you'll get some detailed knowledge and some of the Gutches to look out for when you see it , such as sizing problems and things of that nature. So Flex box can be a little bit tricky at times, so I mentioned some of the watches that you condone run into If you don't show what you're doing with the knowledge of these 10 we will then have some project work around, building some simple lattes at the end. So you be out looking to some of these challenges and then on top of that will have some more advanced layout improvements that we can see as challenges at the end off this class as well. So those last two points will be on you in terms off, taking the information you've gathered from the videos in this class and beauty at the lie outs with some simple instructions from May. So that's it. Let's not waste any more time and get straight into the class. 2. Tools and Resources: Hello, everyone. In this video, we're going to look at the tools and resources that you'll need in order to follow along with this class. Okay, so first things first, The minimal requirement for following along in this class is toe have a text editor of some kind as well as mine. Ditto Eraldo Zip. All that I have in the resource is section to the project. OK, with that said in my videos, I tend to use something called visual studio card. If you haven't heard of it now, it's just a simple text. It can down life for any operating system, so you can just come to code division, ST dot com income and downloaded for whatever operating system you're using Now. On top of this, though, is part of using this particular editor. I also use this plug in called Live Server. Now, what this allows me to do is it allows me to come over to one of my examples here since I opened up this after fold up, choose my heads to know file and then at the very bottom of the editor. I have this live button. Now, if I click on this, it'll I put up a new tab inside of crime, and it takes off my example right now. Why is this important? It's just opening up a Web patch. Well, the cool thing is, is that I can come over to my CSS CIA and sigh I want to end it the blue background of these autumns here to be read. So if I quickly just closed that down, come down into where I got a background of blue and just changes to read When I go to save this, the brazo automatically updates. So I don't have to come over here and click refresh every single time. Okay, So in terms of the tools that I'm using for this class, that's exactly all I'm using. All right. So I would that done? All now, just coming quickly. Trouble that back to the blue. So I revert this and save and we're back to square. What now? The second Fiona quickly talk about here is the structure of the files. So the first thing that I want to mention is that for each video in this class, I have the number of the lesson in front of the folder here. Then I kinda have a gist off. What? The lesson is going to be a bad. Just after that, there's open it up. I have a before folder and then after folders. Okay, The before folder contains the truth work before the video starts. Said, this is what you will look at if you want to follow along. So come into the CSS. Yeah, and the file that you'll see me pro predominantly looking at is basically got the same name as the folder up here. Okay, so what? I'm making changes in the videos. It will be in the fall that has same donors follow Okay in top inside there. That's where you'll make the same changes. Now that's the before Fold up. The after folder obviously has the end result of the video, so you'll see that the same name here we just foot container basics now contains the say assess. If I just probably slide this over, it contains the success at the end of the video. Okay, so that's how obstructed the folders. And you can say it's all the way down to two Taurel lesson 19. However you want to look at it, they're all listed here. Now, these files and this folder structure is contained inside of the tutorials. That zip file that's in the project section off this particular class. Guys, you need to download it from there. I've been it up inside of visual studio cut and you're ready to God and that's it. That's all I want to talk about in this particular via. So let's get started on the real thing. 3. Flexbox 101: Hello, everyone In this video, we're just going to quickly cover some flex box one on one. So, firstly, what is Flex Box? Well, essentially, it's a feeling new census lab murdered. And in the grand scheme of things, talking about three or four years it's existed. And before this one, we only had four. And that we're block in line, table and position by Smart's. This is just a new addition. It is also known as the one dimensional lab mode, and this is because the autumns can only flow or, more correctly stated, flex in one direction at a time, and will understand MAWR on how this works in the next slide. It focuses a lot on the Sisay distribution and a loyal and problems that we have in our labs today and simplifies, um, eso. In a lot of cases, it ra mediates having to introduce a Let's see, it says hacks. There are well known out there and also having to add extra actually now, just to deal with some way of problems. Some of the examples that air around out there, things like vertical alignment and even column based lads where we want three columns in a row, and in this course we're going to seal of these layout problems and how we quickly fix them in flicks box. But before we do that, we're also going to see how I used to be fixed, using the full previous months mentioned, and just that if, why you may hear the term flexible box lab module. And that's because the W three c uses this in all their documentation. Now this is great and everything, but what we probably really care about is has the work. Well, the best way to understand this is to take it step by step. So it all starts with one parent element on this element is referred to as a flex container now first contain. It could be any element in your HTML. In most of my examples, it'll myself would just be a Dave I faced. Contain will then contain a number of child elements and these child elements unknown as flex autumns. Now I like block elements that go down the screen or in line elements that they can go left to right. Flex items can go a number of different directions, and this is defined by something known as the main axis, says. You can see here in this example, the main axis is starting from the left hand side off the flex container and pointing to the right. This means that the audience and the container will start from the very far left and stop flexing towards the right. Now what I mean by flexing is that items inside of a flex container are flexible enough to adjust their size in the direction off the main axes based on the available space in the container. Sounds like a lot to take in at this point, so don't worry too much about that. We will learn mawr about size and flex islands later in the course. Now the point where the flex arm stop flexing is known as the main stop position, and opposite that is known as the main end. So in the case of this example, the main start position is on the very left of the container, and the main end is on the very right of the container. Also, what you need to be aware of technology wise is the concept off the main size, and this is essentially the size off the container based on the direction that made axes. For this example, the main size happens to be the width of the container. Now always perpendicular to the main axes is the cross axes, and this access is commonly used for aligning items inside the flights from China. Although I know obvious here, if lights on and can be positioned along, this axes in a variety of different ways, and we'll say this is well in the future video. Now, just like the main axes, the cross actually also has a cross start and across end. It also has a cross size, which in this example, happens to be the height of the container. Also, the cross start happens to be the top of the container, and the cross end happens to be the very bottom of the container. Now I know there's a lot to take in, but terminology is very important in flex box, so I recommend you spend a bit of time getting your head around all this stuff as it's important to understand this for the remainder of the course. So just one more thing on when a cover here and that is for as a support so pretty much flakes box is well supported in all modern browses. The only Brazzell you might have to be mindful of is Internet explora. Now I cannot use it does say that I E 10 has support for Flex box. But I'll tell you right now, it's using an older version of Flex Box that I will not be teaching this course right, and only 11 has a little bucks in it at the moment. So this is something that could be in mind when choosing to use flex box or not. So that's it for this video, and I'll catch you in the next one. 4. Creating a Flex Container: how everybody in this video we're going to look at creating a flex container. So let's get to it. So I have to current and the apple the card in front of me right now. And if you look at the output, you can see we have to contain its right each contain it contains four elements, number 1 to 4. And if you look at the mark up here on the left, we can see to parent Valentine is with Children inside of it, numbered 1 to 4. Now the class off iron is just basically for ah, the ability to indicate what an item is. And Dualstar Lionel that and container and inland container both have a background color of what would you can't really see at the moment. But just keep that in mind. Also, each item has a level of panning around it, so you will understand more what that looks like in a minute when we convert these two elements to be flipped boss containers. So let's go about doing that. So I jump over to the flexion tenant basics file Anil going to create a selector for our container, which is the first first boss container Every here and I'm gonna change the display property and set it to something called Flex. Now, fight safe. This what we're gonna get now is basically an element that still goes to full width of the screen. However, the items now inside of it are flexing from left to right and only are as big as the content and the patty that's inside of it. And you can see the numbers go from 1 to 4 staying from the very left hand side and spanning as far as it is to go to fit all four islands. But the container is still full with acting like a block level elements. So that's basically a block level flex container. Now, for an in law online which I've given a class off in long container I can use the display property again. This time I use Ilan Flex. If I save this, the autumn still behave the same way. However, now we do not see the rest off the flesh. Boss container sparing all the way across here because it's there are only going as wide as the content that is inside of it. Okay, so just a bit of an important distinction there between the two different types of flex flex box containers. But an important thing that I understand. Okay, that's what I want to do in this video, so I'll catchall in the next one. 5. Changing the Main Axis Direction: Hello, everybody. In this video, we're going to look at changing the main axes direction. So let's get to it. So before I get into the actual aspect off train gee, the direction of the main axes or direction of flex. I just want to cover a couple things here. The first thing is that the contains we're all a fixed width and height and the audience inside of him the full height of the container. This is by design on. We'll talk about this later in future video. Also, what you gonna see on my screen is that each container is in a two by two formation. Now this is because of the width of the window I have here. But for you guys, it might look something like this where it's all the way across. So for now, just understand. I've got it's a two by two. But it's only for the purpose. All shy, only containers on the screen. Okay said that two things I just want to point out quickly now, in terms of changing the direction or flexible the direction, the main axes. We have four options. One is road, which is left to right right to the max. She starts from the left, it flows to the right so the items will flow from left to right. Then we have ro reverse. Will you let him stop from the right and they float from right to left. So the direction of the main actually is from right to left. Then we have column where the items flow from top to bottom so that men actually pointing direction off top to bottom and then column reverse, which is the reverse of that where the iron start from the bottom and floated towards the top. The case of the direction of the main axes is flying from the bottom to the top. So first, let's have a look at Rory. This first container has a class of right. So if I jumped to the flex direction CSS file here and got dot run when they are gonna set the direction of flex to be right. So to do that, we just white flecks direction and we give it a value off right now. Fight. Save this. Clearly nothing changes and nothing changes because Rahr is the default. Okay, I sigh. You may never really explicitly set right, Unless you're willing to change the value off elements flex direction. You see something like Java scripts or some kind of transition. But that's the default behavior, because the next one is Roger reverse. So this is the class that I've applied to the second containing here. So if I come in and change the flex directional, this one to road that reversed, you're going to see it float from right to left is already indicated, right? So the direction of Flex now starts here and goes this way. That's that's right. Reversed. Therefore column. It's pretty straightforward. We just put the flex direction to be calm and say that and you see that start from the top , just down. Yes, the direction is this way. And then lastly column reverse. Well, I say so I flex direction is set to call on Dash Reverse and say that, and then you can say we start from the bottom off the container and we float upwards towards the top of it. The direction of the main axes is this. Why that's pretty much all we need tonight in terms of changing the direction off the main axes. The next video We're going to look at rapping just as we have. I already indicated in this body I in regards to Yeah, setting with off the window, huh? So I say in the next video. 6. Controlling the wrapping of Items: Hello, everybody In this video, we're going to look at controlling the wrapping off items. So let's get to it. So what I have in front of me right now at six containers, each with six items in them. So for the 1st 3 were using a flex direction off roaring for the 4th 1 We're using a flex direction over a reverse. For the fifth. We're using flex directional column, and for the last one we use in flex direction. Off column reversed. Now, as you can see for each container, we have an item that's being called for least one, Autumn said. For the 1st 4 you can see the seats doesn't quite fit in now, for the business is off displaying in this three I'm using overflowing to cut off anything . Normally, this content would just fly outside the container. But I just want to keep things in perspective, so we know where they contain a boundaries. Out for the last two options. It's basically five is not quite fitting inside, so five and six are going to wrap. Okay, so now getting you to wrapping for the first container here, we're gonna explicitly set this to know rap, which is that the fault behavior that we're saying right now? So I'm gonna quickly do that, come over to flex rap and just go dot rap, which is the class I. Sorry. No rap, which is the class were using to explicitly set the no rep option. And I think I flex rat equals no rap. OK, so that's one value off this flex wrapped properly that we can use. And as we can see, we've got no changing right. And that's because we're saying we don't want to wrap anything, however, for container to four and five, which is a row example, every reverse example and a column example. We've got a rapid class A so into them, and that's because I want to show what happens with each example when we use a rap. So I created select the cold wrap here and then any of the flex wrapped property and set that to wrap and let's see what happens. Let's say the file and now we see things have changed. So when we're wrapping items, basically what happens for row or reverse is that the item that needs to be wrapped will follow down on the next line and the items or either Harvin size or depending on the number of arms and won't be a 30 in size or order in size. It really just depends on the number of arms that can't fit here right as it is right now, we had one item only that couldn't fit. So that creates another line which hives the size off these items. Okay, Now we're gonna see more examples on the sizes of these things in a future video. But for now, because we're not doing anything else, the flex wrap will instantly create 1/2 size element. OK, for our reverse, we said the same thing. You can see the sixes underneath, but it's pushed to the right inside because we're using a reverse direction coming down the column, we can say 1234 on the left hand, son. Here. But when we want to wrap, which the fifth element didn't quite fit, it pushes to the right hand side. Okay, so that is pretty much wrapped for you, going direction left to right or top to bottom, right, and just could be mined. That wrapping behaves the same in terms of where it flows. Whether you're using Roe or a reverse. And whether you're using column or column reverse directions, they will fly the same direction. Okay, so the last rap option is rep reverse. And that means basically, we're gonna do the opposite of what we're doing right now. So this will effect Container three and six year. So I've added a class called rap Reverse on those two, and I'm gonna set flex wrapped to be wrapped Reeve s. If I save this, we could see instead of going underneath Now, the six element is actually gone above the content. And for Colin Reverse instead of it being on the right hand side, it's been pushed to the left. Now, if I was to use rap reverse on this column example this five and six would be on the left. And if I was to use a normal rap value on the color reverse, these would be on the right. So the wrapping is not really, um, indicated by the direction other than with the guy, you know, horizontally or vertically. OK, so the rep e will change based on those two directions. But that's it. Um, it says is column reverse or column directions? It'll the happy or act the same way and same for reverse and Row. The wrapping will act the same way. That's pretty much going in a show in this video. In the next video, we're going to combine what we know about flex direction and flex rap, and we're gonna learn something called Flicks Flow, so see the next video. 7. Setting Flex Flow: Hello, everybody. In this video, we're going to look at setting flex Flood. So let's get to it. So, firstly, what is flex flow? Essentially, it is the culmination off you specifying the direction of flex with the wrapping value. So they decided to put that together into one. Probably noticed flex flow simply because in a lot of situations, you'll use the two at the same time. Okay, so this first container, what I'm gonna do is I'm gonna make it flexing direction off ro ie from left to right, and I'm gonna make it wrap it in reverse, staying, you know, a Z Everything goes on the bottom, and then the 6 11 come from top here. So you do that using this flex flow property. So then jump into the flecks fly, don't see assess. And for that, I have a class off, right? That's rap reverse. Okay, Now the properties called flex flows like so And what we do is we specified two of Asia. The first value is the direction of flex. No, in our case of road and then we specify the rap. So for the fact that we want to use wrapped reverse we just retype wrapped in reverse. And then I can cite Once I saved that. You can now see that we've got the behavior off the I was going in the right direction but rapping in a reverse direction. Okay, says the first example, and we can try this for a few more. Safer the 2nd 1 Let's say, What is it? I can't remember off in my head. It's called him as calling with no rap. Okay, so we can come up to flex flow and we can get a dog cologne. Dash column I Sorry. Just know Rap. Like said we got flex Florid is column and then wrap. If I say that now you will see Now we get that kind off off. You know, the few thought of not feeding So the common So that's the another example was tried to more cause we've got two more here. I'm gonna put road reverse for the 3rd 1 and we're going to say it wraps so the arms will be in a going right to left and then wrapping downwards. So flex flow is road dash reverse and we're gonna wrap, Go so and say that and we could see Now we're going from right to left and we're wrapping underneath. And finally, maybe one more example. He's got column reverse. So I was going from bottom to top and we gotta wrap again, like I didn't see what that looks like. So once again, flakes fly, we go column reverse, and we're gonna wrap, okay and save that. And we can see it goes from bottom to top gets the 1st 4 confit the fifth in So it wraps to the right hand side here. So obviously there's more combinations that we can specify here. So I I suggest that you guys go out and try fugue. Just getting in the stadium had this flex float sitting works. But it's really handy in situations where, you know, you need to use the tune at the same time. So that's it for this video. The next video. We're gonna move on to alignment. So see you then 8. Justifying content along the Main Axis: Hello, everybody. In this video, we're going to look at justifying content along the main axes. So let's get to it. So, firstly, what do we mean when we're talking about justifying content along the main axes? Well, essentially, what we're talking about is how the items inside of the container essentially distributed inside of the container. So as you can see so far, we have only really looked at items that have started from one edge and have kind of gone only as far as I need to go based on the size off the items. So in the case, off the flex direction being set to road, everything lines up from left and goes. This far right is it needs to gut, however, that there might be situations. May you want stuff to along on the right hand side and not be in reverse order with you more with them tow line in the sinner. Or you might want them to space evenly or have space around each of the items and someone's on saw. So in this video, we're gonna focus on all the different ways we can justify these autumns along the main axes. They're just a funeral terminology things to keep in mind. We have to remember that we have a main start on the main axes sofa road. That is the very left hand side. We have a main end, which for road is the very right hand side off the container and then the main size, which is the full width of the container. Okay, just get that morning when we further on in the video, talk about changing the direction, and it will change how these things are positioned. Okay, so let's get started on a jump over to the justify content. See, it says now for the first inside here with nothing to apply anything to it. We're just gonna leave it as is because we want to see how this compares to the rest of the containers here. So for the 1st 1 I'm going to basically explicitly say that we want the arms to be justified to the very left edge. I the main start position. Okay, So how did we do that? We do that by basically sitting this property called justified content. And we said it to flight stock. So to do that was go flex start container, which is what I've names one of the classes on that second container And I just thought justify content and I said it to flex Stop. Then when I saved this, we're not going to see any change here. And that's simply because this is the default behavior for anything that is flexing inside of a container. We justify it merely to the start off the main axis. However, we want to also say the other options. So for this state container, I'm gonna move these arms all the way to the end. So what we're doing is we're justifying the content to the end. So the very for that is flex end. So I'm gonna create another classy a cold flex in container and then they justified content . Justify content is flex dash end. If I save that you're seeing there on the arms still stopped from the very far left. But all the loans move away from the main stop point and they ensure that they fish at the main endpoint. Okay, that's the important thing to understand. It's not like reversing the direction of flex. We actually I maintaining the direction of flakes. However, the UN's end at the end point of my taxes. Okay, Next one, I'm gonna make the arms fit in the middle, so I'm gonna create another one called Flex. No, I was gonna call it center container. That's what's called in HD Melt. And for this one is good. Justified content is equal to sent up. If I save this, you will now see in the fourth container here that all the items are distributed into the middle of the container still next to each other. But the spacing in between the main start on the style of the first item in the sequence and the spacing between the last art of the sequence and the end off the container at the sight. All right. So I we've basically centrally positioned all the autumns in the container for the next one . We're gonna add space around each item evenly. So all items are kind of spaced evenly between each other, but also it will have spacing on the left and right hand side. This is referred to a space around. So to do that, I'm just gonna add a space ari on contain a and this will make more sense when we look at the last option, So justify content is based around. If I say this, we now see that we have even space on the left and right hand side of each item. Even let's say we've got small outsize is on the right hand side of the last item and that left inside off the first item. However, if we think about it, if we applied that same with here to the right hand side, that would be equal to exactly half way off this main gap here. So each. So I basically has a left and right with side margins. Not really imagine, but will say, I imagine it's equal my thoughts. Okay, so that's spice around now for space between You may not wanna have the spacing on the left off the first autumn and the right off the last autumn. You might want to actually suppress that. That's where we can use space between. So again I'm gonna come down, go space between container justified content is space between and save. And then lastly, we get almost the same thing in space around. As I said. We don't have the spice before the first item or after the last arm. So the very first arm starts at the main starting point and the last item ends at the main endpoint. Okay, and it takes up basically the full my in sauce. Now this is just for the right direction. Obviously, if we want to change the direction of Flex, how these things behavior also change with it. So if I come up to the very start of the phone and say I want to change old containers here to be, let's say, flex direction, off column and safe, we'll now see that we get yeah, the same behavior just in a different direction. So the first to the flicks start is at the very top of the container. The flex end is at the very end or sorry, the main end on the main start, and then the main sides is still the height of the container, so it got start, start and center spice around and spice between the high side. That's basically all you need to know in this video. In terms of understanding the justify off content. Just understand is basically the distribution off items going along the main axes. So the next video. What we're gonna cover now is how we can align items along the cross axes. So I'll see you then. 9. Aligning content along the Cross Axis: Hello, everyone. In this video, we're going to look at a lining content along the cross axes. So let's get to it. So before we get into too much detail here, let's remember what we mean by across axes. So at the moment, we have all of these examples using a flex direction off road. So the main activities going from left to right now the cross exceeds is completely perpendicular to that. So it starts from the very top this being the cross start and goes towards the very bottom , which is across end. Obviously, the overall hearted containing here is referred to as the cross size. Now that you don't want to point out here before we do anything, is that all the items uh, taking up the full size off the cross axes I there spanning or stretching to fill the entire cross size? Okay, this is actually by design and is the default behavior for flex box okay? The ideal in a quickly point here, which be more important at the moment, is that for items two and four. I've had a fibula panning above them, but of us add a fibula pain below them. You can't say yet because we've got it fully stretched along the cross axes. But we're about to change this. How do we actually tries this behavior that we set a new property on the container known as a line items, and this could take five different days so I can take stretch, which is what we're seeing right now. It could take flex start, which will attempt to align the items at the very top off the container. I close to the cross that then we have flex end which will align the autumns towards the cross end down here. And then we have sent out, which means the arms will want to the center. And then the very last one, which is played, requires a little bit of discussion on is Baseline. And basically what that's trying to do is align the arms based on the baseline off the content that's inside of it. So we'll see that no moment. So let's get started on that. Come over to align autumns and I'm going to leave this first container as is and not affected at all, and work on the second container. So the container class that I have for that while it is just called stretch container. So stretched container and what I do is used. It's all line items, property, and I'm just gonna set the stretch. OK, if I save this, we're going to say absolutely no change whatsoever. And that's because stretches that the fall behavior we're stretching to fill the cross size . Okay, so nothing major there to understand. Just know that when we set the align autumns to stretch, we're getting the default behavior earlier were just explicitly setting it for the 3rd 1 here, this third container. We're gonna set this to a line across the cross that How do we do that? Well, we set, flick, start on a line items. So I have a class for this known as flex that container and I got a line. Items is flex. Start Now, if I save this, you will now see that items a line across the top of the container. And now you're also staying to see that extra Patty and I spoke about sharing down the bottom here there. This patty is more important for what will say when we looked at the baseline example, but I just you can see that we've actually added here, and we've got different variety of sizes, so that's flextime. Now, you know, look at flex end. So I've got a flex and container, and this will affect the fourth container in our example. Here alone, autumns is flex end and save that. And we could say that the arms tried to align across the cross end and here, which is the very bottom of the container. Now, if we want to center it, that's pretty straightforward. We just create another select the center container align autumns, and that will be sent up. And this will affect affect the fifth contain it at the bottom here. So if I save now, we can see all the items trying to align across the sinner based on you know, the absolute Senate position off that individual items. So this number three is very small, but it's still scented. Based on the very middle of that small item for the longer ones, it still picks the middle of each autumn and shows that and then for the slightly shorter one again, the very center off the item will be aligned. Like I said, it's pretty much center. Now the very last one is referred to as the base line. It's not used that often, but when it tries to do is that try? So line the content in a scented why or basically against each other? Okay, not necessarily in the center. It tries to align it so that it's Yeah, they're as close to the cross starts possible by Khaled. The values are aligned in the right. You'll see the minute how that works. So I gave a line. Items bislan and save. This will affect the very last books, and you can see now that items one and three basically pushed their way down so that the content inside of them lines out with the content started off too and full. So essentially, that's what baseline dots it trust on the content together, regardless of the source of the autumn. Okay, so that's pretty much it for this video. Try playing around with these alignments. Why, adjusting things like flex direction and things like that, even the wrapping it cell that works the next video we'll focus on it is basically how we can change the alignment off wrapped items. So see you then 10. Controlling Alignment of Wrapped Items: Hello, everyone. In this video, we're going to look at controlling alignment off wrapped items. So let's get to it. So what do we mean when we say we're controlling the alignment off wrapped autumns? What we're trying to say is that whenever we do have wrapping, we may want to determine how the rose is When we wrap, we're creating a new road in the case off flex direction off road. We're creating a new road off items. We may want to control the behavior off how those rose it distributed or aligned. Okay, that's pretty much what we're talking about when we're saying controlling alignment off wrapped items were talking about controlling the alignment and distribution of each road. Okay, that's first and foremost. Now what we say in front of us right now is basically a bunch of examples, and each one has to rise at the moment by default. When we talk about alignment off wrapped autumns or rose, what Flicks Box tries to do is it tries to stretch each road to be your equally proportioned. And what I mean by that is in this case, we have two rows, so each row will stretch to try and fit halfway off the containers height or half the size off the cross size. Okay, along the cross axes. So we have two rows in this example. But say we had three then the height of each row would be 1/3 of the height. If we had four rows, it would be 1/4 off the height, you know? And so on, so on saw. So that's the default behavior we try to stretch. But we can change the way this works. Okay, Before I do that, I'm gonna sit explicitly how we can make it stretch like it does now, using CSS So jumping over to the along content file, I'm going to use the stretch container selector. So don't stretch Container selector and I'm going to sit. This probably called online content, and I'm gonna set it to stretch like so. So if I save is now, the page will refresh and you'll see no change. And that's because where explicitly said he would default. Okay, so nothing spend too much more on that. So for the 3rd 1 what I wanted Dio is I wanna make it not stretch anymore, But I want all the rose to try and squeeze up and get to the top of the cross axes as possible. Or sorry, the top off the container is possible. I were trying to push towards the start off the cross axes. So do that. I'm gonna use flex Start, and I've got a selected for this, and I've got a line content and I talked. Flick stop. Okay, so this will push towards the cross stop. And as you can see, all the autumns now no longer stretch the the right. Sorry, no longer stretch, Which means the autumn start stretch and all the items or the roads are pushing to his fire . Top is they get That's like, Start, I come down, I'm gonna do the same again. But this time I'm gonna do it towards the end of the container, All the cross end And for this I just got a line content physical to flex, end and save, And we can see now the autumns are at the bottom of the container. Now, just another thing to mention here is that I'm using a rap off. Just wrap. So the right values rap. Well, the flow very has a rap in it. However you set it up, but we don't lose that when we set the alignment of the content that remains the same. So that's why the six is on the very bottom here and not the 12345 If I was using rat reverse than the 12345 would be at the very bottom, followed by the six billion directly above it that is flex end. There's a few more here that weaken dio we've got sent up. You said the container a line content is center and saves that And what you're going to see now is that the Rosell try to fit in the middle and get as close as they can into the center. So the bottom of the first row is it directly in the center and the top of the second rose directly in the center. So if we had three rows, then the middle off the second round would be in the center. Okay, so just understand. We're trying to push through the center as possible. Next one is space around. So this is similar to the space around example we saw when we were just to find the content along the main axes. So a line content space around. So my saving their run that we can see that in this example we've got even space on both the top of the road and the bottom of the road for each. Right. So that's why we have a big gap in the middle here because we have even space on the bottom of the first row and even space on the top of the second row. But we also have Spacey at the bottom with a lot of second row and at the top of the first round, similar to how we understand space around when we're justifying content on the main axes. Along with that and similar to that is space between. You've seen this stuff before in terms of justifying content, but when we have line it, it's essentially the same thing. So if I got space between safe, we get is the second last one here, no space at the start of the first row and no space at the bottom of the second round. Okay, so they're all the values that we can use in terms of aligning ours when we have wrapping. But the last thing I want to quickly show is a combination of using online items and along content together just to give you an idea of how this works. So the box here, just above the last box were using space around. We can get the same behavior here by aligning the items inside of each row to the center and then on top of that, we can basically leave it as stretch, right? So it will ease along content. We're not gonna specify along content value. We're gonna leave as the default, which is stretch which will create exactly the same behavior we have for space around. So let's say that connection. So I've created a selector. It's a very long name. It's must use a line items as well. Container. That's why I'm gonna sit the yellow in autumn. Is here to be sent up and save. If we get into the very bottom, we can see that the last box here is exactly the same as the one above it. But the difference is that we're saying that we want the align content to remain stretching so the rose will stretch to meet halfway here, and then the second row will be the second half, and the autumns in sort of a Troy are going to be positioned exactly in the center. This just happens to be the same as the one above it. And so there's two ways of doing it. And just keep that in mind when you're playing around with this stuff. So that's pretty much it for this video. So and that's pretty much it for containers. So going forward, we're gonna look at flex items and how we can change the behaviour of individual items within a container, because so far we've just been playing with the behavior of items within a continent, so it affects all islands. But we may want to change maybe the order of each item, or we may want to offset. And I am So it has a different alignment to the rest of them. Or we may wanna have someone times bigger than other is or some smaller than others and things like that. We're gonna cover that in the next section. But for now, just play around with the properties we've learned so far contains, get a good understanding for it. And then we'll move on to the next section of the course. So I'll see you all then. Hi, guys. I know you expected the video to be either, but I just want to quickly fix a mistake that I mentioned in this video, and that was around wrapping. Now I want to mention that wrapping really doesn't do much in terms of a war in content. But that's not exactly true. So if I come and sigh, I won't affect this fourth container and set the wrapping of this content to be wrapped reverse like side. So just got flakes. Rap is wrapped reverse. What you're going to see is that the content kind of flips over on the cross axes. So the six was originally at the bottom here, followed by 125 above that. And then when we chose the right reverse, it kind of mirrored itself and put the six on top with the 125 underneath that says the best way to explain it. So when you use wrapped reverse, you basically mirroring the cross axes. So the cross actually swore, starting from the top and pointing downwards. And now it's died from the bottom point upwards. OK? And so as a result, you can see I'm using Flex end here reflects End is at the very top of the container. If off the trenches to flex start like that, well, it would go back to the barn. However, the six is still flit, so I just want to quickly put that in. So thank you for watching and I'll catch in the next video. 11. Ordering Flex Items: Hello, everyone In this video, we're going to look at ordering flex arms, so let's get to it. So, up until now, the ordering of items has been based on one thing, and that is where the item is positioned in the Dong I. We have a flex container here representing this first box, and we can say Autumn one is the first child. As a result of that, it is the first autumn in the list here, and it's the closest to the main Stein position you can see. Item for here, though, is the last item in the list. So as a result, it's the feathers, the white from the main Stein position. So just to demonstrate that that's actually case if I removed the letter from the start and place at the very end and save, you'll now say Autumn number one is at the very last position right so we can change ordering. Obviously, if we change the dumb, however, that may not always be the situation that we want. I we may not always have control or being able to change have a hissy mills represented. So as a result of these flakes, books created a property called the order. Probably full flex arms. So the order property is assigned to each item. Oh, yeah. Any autumn, depending on how you want to set it up. And the value of order is zero by default meeting. We don't really have an order. Just use the order that's in the list. Yeah, So they demonstrate that I'm just gonna create a CSS class here called Dark Default Order, which is one of the classes that go to that very first container there. And we're going to apply a rule to every every autumn animosity order here to zero. If I save that, we can see we get no change over here. So the order is states as intended. Now, once again, if I come over and I cut this out and I put it at the very end and save, you'll say number one once again goes to the very end. And that's because every autumn has an a hole ordering position. All right, so how do we actually use the order property to change the ranking off the autumns? It's based on numerical value, so it could be any number you want, but the lower the number off an autumn is the closer to the main stein position. The item will appear and the higher the order number is, the further away from the main staying position and on will appeal. So an example of this is so I wanna for the second container push the fourth autumn to the very front, right? How did I do that? Well, I've created a selector or class on that container called last to first, and I'm gonna affect the very last autumn to do that. You just got last off top. Mike said So I'm grabbing the very last item in that second container, and I'm gonna say, because all the order values defaulted. Zero. I'm gonna set this one to native one. All right? So it's lower than all the others. So if I say that and we can now see, autumn, autumn before is now at the very front. And that's because it has a lower order value than the rest of the autumns in this container. Now, also for another example, if I say I want number 12 now appear at the end. All right? We have to give I higher value. So Here's another selector I have first to last. So this will affect the third container and I'm gonna grab the first off type. This time you go up is one. It's ah, it's higher than zero. So it's higher than the wrist off the items inside of the container here. So 23 and four war stay in that order. But one holdout here at the end. So if I save it, you can now say the number one has jumped to the end here. So that's the basics of how we can move things around. Now we'll just have a couple more examples. Basically, we used one and only one so far, just shuffle things around. But the number really doesn't matter as long as it's lower than everything else. So say I want if this this, uh, box here, I want to move all even numbers to the front. But I want the four to appear before the to. All right. How can we do that? Well, I just give a lower value for two and four, then one and three. So in this case, a plainly one and 30 and two and four b, some value that's lower than that. And then because four in the current watering is higher than two by default, I have to give four a lower value than two. Okay, so let's see how that works. So if I guy dot even to front, which is the class of given to that container, and I'm gonna go item and even its specify end off time. Even so, we're very all the even items in that list. I'm gonna set the order value to something here like native 10. If I save that and we look at what we've got, we now see items two and four now appeared before one and three. Okay, so that's half the battle done. We've got the even numbers before the odd numbers. However, I said I want to have four before too. So they currently these two values have an order very of live 10 before needs toe haven't number ordered number lower than the tip. So it once again, I think create a similar selected the one I feel I have appear copy and paste and then rename to even to front. So they got the right container here, even to France, when I say lost the type, and because we know is they tend to specify this is native 11. I'm gonna save that when they are going to say the four has pushed to the front. Okay, I it has a lower order. They then the second order. So therefore, AP is closer to the main Stein position. And that's the other thing that you have to remember. Is that based on the direction off the main axes? Whenever we have a lower order number, it will try to stay at the main stunning physician. If it's a higher number, it will appear towards the main in position is far a second gun. Okay, so just keep that in line. And Farley, for this last one, we're gonna do something a little bit funky. We're gonna put the third item first, followed, boy, The first item to be second, followed by the fourth item to be third and then last we're gonna put the 2nd 1 is the very last option. Okay, I've called this the jumbled container, so you don't jumbled. All right, now I want to put the third item first. So to do that, I just go item and we got in and off type. Specify three year because we're talking the third item and the order, and I'm gonna send it to negative truth in there. There isn't one Do. That is because I want to have one before the before the value of floor, which will keep zero. So what needed to for 3rd 1 and then, rather than I actually will run it right there just safe and see that make sure that the three goes to the front and it does. Therefore one could believe it as is, but the and we essentially, we can do that very explicitly. Said it here just for interests sake. And I'm gonna actually sit them all especially just to indicate that it works. So for the second line off Sorry. The first autumn gonna put that in the second position. So jumbled the item First off time that said that order being the one. And when I say that we get no change. So the autumn now has been explicit, is set to be the second lowest value of all the values currently, that's why it's in the second position. And there for the fourth autumn, which were say we want to have as the third position last off Todd Order. I'm gonna sit here zero even though that's the current value. No, it's Ah, I'll say that and nothing changes And there isn't one. Nothing changes is because the second item is still gonna value of zero. So therefore, physically in the dom, it's before the four. So that's why appears before it. So as a result of that, in fact, I've talked it wrong. Appear, too, which doesn't help my case jumbled and item and off Tired to programming that second autumn , and I'm gonna sit that toe order of one meeting, it's going to be the very last option. They have often hold this right down. I save. We now get the ordinary that we expect. Autumn three is first item, won his second on him for his third and led him to his last. That's pretty much all I want to cover in this for the yard. So the next body I we're going to look at how we deal with sizing off flex arms. So see you then 12. Controlling Flex Item Growth Basics: Hello, everyone. In this video, we're going to look at controlling and flicks autumn growth basics. So let's get to it. So by default, what we've seen so firing all the examples, each item I li fills as much space is it needs based on the width off the overall item, which is made up off Patty border and the content sites of itself. Now, just to make this example Sim ply, I've added a box sizing property on this. So I think explicitly set the width of each item to 50 pixels. That's just to make things a little bit easier on myself, at least for this point in the course. Now we'll say a better way of handling this in a few more videos from now. But for now, I've just said an explicit Brit with on these items, okay? And they hold 50 which means old three at upto 1 50 which is exactly half of the container , which is 300 pixels. Okay, so what do we mean when we're talking about controlling the growth off islands? What we mean is, we want to Alec, I'd spice in these autumns based on the remains space. That's unallocated here inside the container. So let's just say we want all three items to grow in size to fill the remaining off the white space. It's here. That means that these items will grow exactly double in size of the moment to fill in that remain spice. But we can choose which items could be chosen to grow. It doesn't have to be all three high. Unlike when we controlling behavior on the container, we can control growth at the bottom level so we can choose with the one grows and three grows or none of them grow or they all growed or only two grows. Someone saw himself. That is for this video. That's what we're gonna be looking at. What? How we can choose which items grown. But the next video, we're going to look at how we can change how much they grow by. Okay, so but the phone all items have chosen not to grow. And basically we can change that and we can change that. Using these flecks grow property now by default flex Grosset to zero. And I could quickly show that by coming over to the success and running a rule for it. So what's he gonna say is the following? I don't know. Items grow says select drive a minute, select all items looks and they said flex dash growed to zero. When I do this, you're going to see no change. And that is because every single flex autumn does not grow by default. However, obviously we want and I have things. Great. So the second box I'm gonna make sure all items growing evenly here. So to do that, we're just gonna sit each one toe, have a flex, grow value off one. Okay, so dot all items right. Eliasson's grow and she's items growing every autumn. Flex growed said to one. And when we do this, we can now see down here that each autumn has grown exactly the same right? And that's because we've chosen each autumn to grab. So John before was 50 pixels. We knew that the lions were filling nearly half the container. So now each item should be exactly 100 pixels wide. So if we select one, we can see it 100 pixels wide, 100 pixels wide, 100 pixel swat. So that's how we can proportionately sit at resize and stretch the growth off these items to be even. We just said every autumn to be the same value. Okay, that's the distinction. Yet the same value they have a business V. I was just gonna keep everything. Is one just like being simpler But we may not wanna have each autumn growing We may only wanna have one autumn growing to fill a space. So how do we do that? Well, we just choose that one with him and we said, Flex, grow one. So if I come there now and I guys first, I didn't grows when she's autumn. First off Todd Dark Side Flex grow one save Come down to the 3rd 1 We can see that now. Noble Juan has growing as far as it needs to dry in order to feel that spice. So it could be in mind that two and three of 50 pixels wide right? So that makes 100 people's overall, and the container is exactly friend of pixels wide. Then that means autumn number one should be 200 people's one, and we can see that right there. That's that's pretty cool. Now we can also do the same for, say, the third on, um, so very similar food. Autumn grows and we don't Adam last off time. You have flex garage is one on that one. If you come down, we can see that third arms grind to 200 pixels. And the other two remained in 50. That the last one with side We want to grow just autumns two and three. Well, once again, that's pretty straightforward. We grab something somewhat off got here, and we can put multiple items grow because that's the name of off the selector on the container. And I'm gonna puts and type two And we've done it all thought to coma Coma And I will group that toy line do it again on the night and change that to last of thought last, oh, time inside. And now we can see. And it didn't happen again. Why did that not work? Multiple arms, growed and last of type into type Come over here and multiple items grow. That is very strange. Multiple autumn Zgray multiple. Come on. Multiple. I was graceless. Kurt, one very, very strange here. While that's not working, Okay, sir of it that I had multiple arm grows items, grosses Did it grow? So find out, Save it. Sorry, we come down and now you can see Autumn two and three have grown and one is left alone. Which means it, you know, At a 300 we take 50 away. It's to 50. So each item of two and three should be exactly 125 pixels in size. So if I come down and check it and you can see that's exactly what it is that's all I want to show in this video. In the next video, we're gonna focus on the degree off. How much? An autumn congrats. So see you then. 13. Flex Item Growth Ratios: Hello, everyone. In this video, we're going to look at flex item growth ratios. So let's get to it. So before we get into how we can change the degree of how items congrats, I how much an item will flex beyond its regular size, I just want to point out two things. The first day is there is going to be some basic mathematics involved in this examples. So if your meth makes is not the best, especially when it comes to fractions, I'm sorry. I will do my best to make the method makes side of things as simple as possible. The second deal wanna point out is that I've increased the size off the containers here so that it's 450 pickles one. And this is so that we have exactly 300 pixels off free space here to work with one growing the items. Okay, so now that we know he had to make autumns grow, we now need to understand how to control how much items square by and how this works is that the value off the flex grog property is treated like a ratio. So what I mean by that is that the very we give indicates how much and I don't should grow . Compared to all the other islands that have also been specified to grow. That adds a lot to take, You know, I understand that. So it's have a looking example. So the first example I'm gonna do is basically I'm gonna set all the items in this first container to have a flex grope value off to and see what happens. So I'm gonna come over to my flicks, grow ratios dot CSS far, and I'm gonna put in basically the select up to get that So we say Same. Right? She I, um And then I'm choosing all islands and left Flip, set, flex grow to two. So not one but two. If I save this, we're going to see all three items are actually still off Equal sites, if you think about that, makes sense because we've got this with the value of to this with the value of two. And this with a value of two. If you understand your ratio logic, that's the equivalent off one toe, one toe, one. So if we had a flex grow value of one, that's exactly the same as a flex girl, too. We could have a flicks graph tenfold days, and that would still give you the same equivalents because we're given the sign Value told three. Okay, so that makes sense. However, what if we want one autumn to be sought bigger than the other two, right? Say, for example, we want a ratio of one toe, 1 to 2. All right. That means that three should take up twice female space that one in to take up off this remaining situation here. This is where we kind of getting the fractions. The first would see how that works. So I'm gonna come over and I'm gonna go thought 112 And that represents the ratio that we're going to use. And I'm gonna set every autumn to start off, please, with a flex grow off one. So if I saved that, you're gonna see the same behavior is above. But that's because we haven't changed the last autumn yet to have a flex growth too. So let's do that. So 11 and to again dot item last off time. Sit flex. Grow off. This to to So now this is a ratio off, too, and the other tour racial one. Now save. And we can see that three here has grown just a little bit more than one in two. But what we don't understand is why how much now? How this works is we have to do with fractions. So what you normally do toe work out how much each other's grown by is. You add up all the flex grow values of each item, so for one and two, it's one plus one, which is two and then for three. It's also too, so that's full and then use that as the denominator. So if you don't know what the nominator is, that's what you divide by. So you take that value and you take the value off the flex, grow for the item and you divide that by the overall number. So what I mean is is that we have an overall some here. Four a value of four because we have to, with the very of one on one, with the very attuned to plus two his fault. And then for the first item, it's one divide by force. That's 1/4 so the amount of space that we've improved by is 1/4 of that remain space. Very confusing. I understand that. But just think it's 1/4 off 300 pixels. So 1/4 of 300 pixels is 75 if you do your mass. So considering that the initial with was 50 if we add 75 to 50 we should get a with off 1 25 4 Number one and number two. And that's what we have here. We have 1 25 and 1 25 now. The last autumn it is to over four, which is 1/2. So we knew the available space was 300 so half that it's 1 50 then the original heart was 50. Original with was 50 so it's 1 50 plus 50 which equals 200. So item number three is, you can see is 200. Maybe it's confusing. Depends on how good your masses Yeah, unfortunately, is not much we can do in terms of making that any simpler. So that's what happens when we have a 1 to 1 to two ratio. But what if we have a 1 to 1 to three ratio? How much does that grow boy what's have a look at an example of that. So I'm gonna come over the CSS, and once again I'm gonna go 0.1 dash 13 say the ratio is now one toe. 123 And for every autumn at the moment said Flex, grow 21 So I saved that. We get an equal sharing of the growth of the moment. If I say I'll take this watch content this selected here and then put it under and just changed the value. Hold the name of the class. Year 23 and the flicks growing Probably 23 and save what we're gonna get now is that the third item? It has taken even more space. So now it's taken three fits off the extra space that was remaining. How is it? 3/5? Well, it's two items off one plus a three. That's five. And then the value is three. So that's three fits so one into taking 1/5 each. Okay, If you're not sure how this works, please send me a message at all. I'll try and explain a little bit simpler if it's very difficult feat. So in terms of the overall whip now. Item three. Think of 3/5 of 300. Say the best way to do this is divide 300 by five, which is 60 not Tom's. That bar three, that's 1 80 And then the original sauce was 50 pixels. So 1 80 plus 50 is 2 30 So if I quickly check that I come down, you can see the overall with that Autumn is 2 30 Okay, The hour for the other two were talking about 1/5 of 300 which is 60 60 plus 50 cause fifties. The original width of the item equals 110. So you can see for items too. And one, though with is 110. Okay, so they they're relatively simple ones Because we're talking about, you know, I want toe 12 some number. But what if we have something a little bit more complex? Say we have a 2 to 1 to two. So I don't number one well used two times the amount space that I'm in trouble use. And three will also used to time CNN space that ah island. Two years. So 212 So let's see how that will work on that. Come over on the crown. Other select off 212 Choose every autumn just to start off with Said if Lex grew off one said their role even the start off with. So they end of the very bottom. And then for the first and last one, 212 the autumn first all time like so and then rule come of that good too. 12 again thought autumn last off time. So we're grabbing the first and last autumn in that list. And then what I'm gonna do is set flex, grow to two. If I save this and come down, we can now see that one and 30 off the same size. But two is just a little bit smaller. And that's because one and three a taking twice team airspace that was remaining than what two watts. So once again, think about the fact that we've got, you know, five. So we got to 5th 2/5 1 fifth of the remains space. So 1/5 was 60. So 1/5 of 360 so two times 60 is 1 20 plus 50 is 1 70 all right. So if we look at the size, we can say its 1 70 for three and should be 1 74 1 as well. And it is now. I think about item number two. It's just 1/5. So it's 60 plus. The 50 that was originally there said should also be 1 10 And as you can see, it's 1 10 That's pretty much flex good, you know? So I recommend you guys play around with this a lot just to get understanding of how the rights years work and takes a couple of goes to get this right. So don't rush ahead and try and understand more about, like, shrink and flex basis. All these things we're gonna talk about next try to get a really good understanding of flex Gray because this is fundamental for understanding. Flick shrink. Anyway, assistant flight shrink will be the opposite off this, so I d why, that's what it ended. I'm gonna end it at this point. In the video X v I we are gonna look at something called Flex shrinking, saucy old and 14. Controlling Flex Item Shrinking: how everyone in this video we're going to look at controlling inflicts autumn shrinking. So let's get to it. Okay, So when we talk about controlling flex Autumn Shrinky were talking about how items will resize themselves so that they can all fit inside off a flex container when I mean by this is in order for items to shrink, we need to be the position where all arms would not fit inside off the current flex container. So what I have in front of me right now is a 300 pixels while container and currently h flex autumn is 50 pixels wad. This is a sign of float one. Same before So, if I sent each island here to have a width of 100 pixels, then we will have the last item overflowing each container. Why? Well, because we have four islands here that 100 pixels wide, which would equate to 400 pixels. So it's exactly 100 pixels more than the fleshy tank and support because you can only take 300 pixels. So that leaves the last item this 100 pixels wide. It as sort of the Contam makes sense, right? So let's see this in action. So what I've got open and friendly right now is the flex shrink dot CSS far. And I'm gonna set every single item in here to be having with off 100 pixels. If I save this, you get this result now, you may have seen something strange. Happy new, though. And that is we didn't get the other flow I just mentioned. Now, why is this decide? Well, it's because flex autumns I said to shrink to fit the container by default. Okay, so this is the same behavior as explicitly sitting this. Say says property flex shrink toe one. All right, so let's quickly see that connection. So for the first container here, I'm gonna create a new role called all old shrink container. Like so. And I said every single autumn to use these flecks shrink property, and I'm gonna said it's one. And when I save it, you'll see we get the same result. Okay, that's great and everything. But there may be situations where you don't want this to happen, and you want to be out to disable and violent from shrinking or control how much each item should treat by which is similar to what we saw. Growth, right? We may want item to to shrink more than item three and so on so forth. Right. So we're gonna go through a couple of examples now to demonstrate the different behaviors we can put for shrinking. So let's for starters with turn off, Frankie for all the items for the second container except one of them. Okay, so I want under now. Oh, actually, before I do that, I'll show you what it looks like if all items don't shrink. OK, if you're all set to Affleck, shrink value off zero. So to do that, I have Oh, no shrink container. I thought autumn like so and that's explicitly set flex shrink to zero. And when I saved this, now we get that overflowed. So if about that item now floating outside off the container, we can see 12 and three kind of fitted, but that 4th 1 is leaking outside of it. Okay, that's 100 pixels that I was talking about that last item. So now with that mine, let's see what happens if we just try to shrink one of the items so no, all of them just one of them. And we'll pick with, say, the first autumn here in this third container. So do that. I've gotta selected here, and I've called it one item shrink in Taita Autumn and sorry this autumn. First I said before I set that to first of time, I want to turn off flick shrinking for everything and then I don't one item shrink Taylor, the autumn first off type. And then it turned this one on. I was leaving strength. You shrinking on for only the first item. If I save this, what we're gonna see is that I'm one has tried the strength as far as he can go, But you can still see We've got some leaky out here. Okay, so this is a potential problem. And so it's a poem. Well, the autumn we chose to shrink, you know, they shrink so far, and that is a sfar a skin guy in terms of the patty and obviously the source of the content . So the content here is gonna one, so it's relatively small. But if we would have changed, the content will be here and say we put it a word like ABC or something like that, then obviously it wouldn't be out Shrink his father. So let's have a look at how that looked in action. I'm gonna come down to the one of my strength and then tries this one to, let's say ABC if I now come and save, we're going to see that the first I am grew just a little bit more because of the fact that you know that that contents are there really couldn't go any smaller than it currently is. And this is based on things like the fine size, you know, the word and all those kinds of things. You know, I think the problems we've had before in the past, with wits we still have that same problem here. We fly Shrinky. So I just want to point that out. So something you just have to consider. So, up until now, what we've been doing is just basically choosy, which I am should shrink in which one shouldn't but similar to growth. We can control how much and item can try to shrink as well. So if all is the same ratio and fraction problem, it's just done in a slightly different way. in terms off how we calculated. So I, firstly, with a video, is going to come together this very last container. And I'm gonna set the second autumn here to be to shrink twice as much as the other three here in the list. OK, at the moment, they're all shrinking at the same, right? So do that Come out to my flex shrink, sees this wall, and I'm going to create another selecting up, and I'm gonna call it the 1 to 1 one container we're going on, um, and off time. And we're gonna go to because it was selected in the second line. That could be mine. Currently, all arms that have a flex shrink value off one. So for this one on this set, flex shrink to two. Okay, I and Saif, if I scroll down, what we're going to see now is to is so smaller than 13 and four. They're the question is why? How much? Well, just remember that if we didn't set any autumns to shrink, we will other flying by exactly 100 pixels. Okay, So because we have four items here, if we had an even value what we had before then each one would shrink by exactly 24 pixels . Right, Because that's 1/4 off the 100. However, in this case with made to to shrink twice as much as gelatine. So now we do what we did with the ratios in the previous flex growth video and we some them out. So we know we've got three. They have a very a one and one that has a value of two. Right, so that is five. So therefore, the second autumn should shrink by 2/5 off what the other flow space would have been. Says 2/5 off 102 5th of 100 is 40. So because we were trying to spend this item out to be 100 pixels wide and we can't do that , we subtract 40 away from 100 the value should get here is 60. So let's quickly check that. I'm gonna choose the autumn, and I'm gonna choose Autumn number two. As you can say, there with is 60 pixels okay? And that makes sense now, for I was 13 and four. We're just taking 1/5 of that available space and shrinking it so because we're trying to reach 100 pixels, 1/5 of that remaining space of 100 is 20. So 100 miles 20 is 80 pixels. So as a result, 13 and four should try and fit toe 80 pixels and they do so one is 80. Item to item three. Sorry is 80 and autumn for is also ate. Okay, that's what I want to cover in this video. In the next video, I'm going to look at a better way of specifying an initial size off flex items. So so far, what we've been doing is we've been using the success with property to specify the explicit width of these things. However, this is a slight issue with that fault, and I want you to have a think about what that could be. So I have two questions coming out of this video, and I'll leave it for you guys to work him out. The 1st 1 is why is using with a bad thing in terms are specifying the size off a flex autumn and to in terms off wrapping. What would happen if we specify a container to wrap, But at the same time we're specifying items to know Frank. Which one will happen? Will it continue to overflow? Or will the items wrapped next line maybe give that a try and let me Not until then I'll see you the next video. 15. A review on Box-Sizing: Hello, everyone. In this video, we're going to look at our review on Box I Z. So let's get to it. So in the previous three videos, I talked about how we can control how flakes items grow and shrink in the examples I should us. It took advantage of another CSS property that I didn't mention known as Box I z by saying this box sizing property to a particular value, it actually made it easier to explain what the width of each item was actually going to bay after he had grown or shrunk. So this video, I'm going to quickly talk about this box sizing property and how it works and how well, Buz it going forward in all my examples. Now take a look at the three boxes I have in the browser here. Don't worry about reading the content just yet, is I'm going to make some changes in the sisters first, Then move rate exactly what it says, and you should be out of understand what is going on here. So the first thing I'm going to to is only come to my office sizing dot CSS file and I'm gonna apply and you roll on the arroyo. New apply is with container. Why so so this select that will match both the first box and the second books. But at the moment, just worry about saying the property. So coming in on this it with here to 300 pixels and save. And now we get a result that looks something like this. So it looks like that the width off the container is now 300 pixels, but it's actually not so. That's quickly. Just read what's inside the first containing here, and then we will verify what it says. So what it says is when specifying the width of 300 pixels for this container, it's really 352 pixels wide. This is because we're using the default value. I've got two values here off Bob Sizing, which is content box. Okay, so we're using this box I Z Well, it's actually built in and set to content box at the mother. This value and shows that the with is applied to the content only. So this content is exactly 300 pixels wide. So is it city and making it 300 pixels. It does not take into consideration any patty or borders. So this space here for the pani on each side and obviously the spaces for the border is not factored into the 300 pixels. Hence one the size of the container is 52 pixels water. Then you expect so. I'm gonna open up the developer tool by here just to confirm that and find out, click and select the container. We can see that. In fact, it's correct. The width off this container is exactly 352 pixels wide. Okay, let's make sure I'm telling the truth. You about the fact that box sizing is set to content box and will do this by its possibly setting it. So when it come back over to the C s a CIA quickly just trouble that off. Come back, This is S. And I've got a selector cold. I think it's called dark content. That's box sizing container. And I set the box sizing property to use content box. And this will affect the first concerning here. If I say that we can see we get no change. Uh, and that's kind of what we expected based on the information will be provided inside off this container. Now that's okay. But what if we wanted the container to be exactly 300 pixels wide? And that's including the patty and the borders as well? Well, we can change that by seeing the value off the box sizing property to board a box. So let's see that in action. So what I've got here is there a never select out for border box? Sarrazin Container? If I said box sizing on this one to border box, this will affect the second contained in here. So if I save now, we can say the second containing here has shrunk a little bit. So it's free. What's inside of here now, it says when specifying the width of 300 pixels for this container. It's exactly this wad I looked in size now exactly 300 pixels. What? This is because we're using a box I Z value off board a box. This ensures that when we specify a whit for an element, we know how big it should be on the screen. It does factor in Patty and borders into the everyone with of the element. OK, so perfectly. Choose the developer tools and hover over that autumn. We can now see that the container is 300 pixels. What, exactly? So that's what I've been using so far on my videos. I've been sitting box sizing to border box in this system made it easier to calculate the width of things. Now box size. He also works with hearts. So that's what this last containers for is we're going to explicitly set the heart on this one. So I have a selective as well. It's just dark heart container like sir, and the same third box also has this border box sizing container class it to it as well, so that will be instantly applied here. So if I said the height off 300 pixels my side and save, we get the last book stand here that is still fully spending all the way across. But the heart off the box is actually now 300 pixels, and I'm in the full high. The box is 300 pixels. As we can see there, that's all I want to show in this video in futility eyes. I'm gonna always assume that this has turned on. So I went I'm talking about what the next for years, about which is flex basis. We're going to be using the same box I Z and setting it to board a box at all times, so I'll catch you on the next video. 16. Explicitly Sizing Flex Items: how everyone in this video we're going to look at explicitly sizing flex autumns, So let's get to it. So a few videos back, I asked you guys to questions while the questions involved you telling me why using the CSS with property to specify the size of flex items was a bad idea. So just in case you haven't worked that out, I will quickly demonstrate why this is the case with a simple example. So let's have a little his first container and say, I just want to explicitly set the width of these items to 60 pixels. Well, I have a selective for this, and I've created a class on the first content called Do Not Use wits and then select every autumn, analysts said. Every all autumns with to 60 pixels and Saif, and we can see that the autumns have grind just a little bit more, and they're in fact, 60 pixels. So what's wrong with this? Well, let's think about responsive design, right? So just selling this top, we wanna have items that line out from left, right and take up a certain amount space. But when we want to get to a mobile design, we may need to stack them up on top of each other, right? So you brought a media query and the flex direction on the desktop won't be to be right. And then when you get to a mobile size, U turns that to calm, however, from using with here. This is no ideal. And I'll show you what So far, guys don't do not use wits on. I set the flex direction to call him inside. We're going to say that the autumn still retain that 60 pixels off with on. That's not what we wanted. We just wanted to change. Yeah, the basically the size off these things to be 60 pixels high but still go across the entire cross axes, right? And that's not happening in the moment. And that's because we're using with Okay, so that's the issue off using with an hot. So now that we understand why specifying Whitson Heights for flex items on no ideal, let's look at the alternative to this to deal with this sizing problem when we change the direction, the main Axes Flakes box has actually included a new CSS probably call flakes basis, so flex places allows you to specify the initial size of a flex autumn along the mine axes before any growth or shrinking takes place and that size is retained even when we change the direction of the main axes, unlike with and high. All right, because with high, we're talking about the actual width of an item and the height of another. Okay, not the size of an item flowing down. The main actually is okay now, the felt very for a flex basis is referred to as auto. And what this means is that the flex item will only be as big as the content that's inside of it. Oh, it will explicitly sit set a width or height based on the width and height settings that we have in our say sets I this with right here. So that's why we still have 60 pixels here at the moment because the default flex spices is sent to order so we can demonstrate this that this is actually the case with the second container. I'm gonna show the example of how that's explicitly set. So to do that, I'm gonna create another selected down here and g o auto basis container and I'm gonna hit the first item. And this is just for the purpose of seeing the difference. First off taught, and I'm gonna sit the flex basis toe order. All right. If I save this, you're not going to see any change for the first item. And that's because it's currently using the content with. And the Patty two specifies its size, right. But as I said, we could also use something like the width here on said that the 60 pixels every side of this we can say now it is grand slightly to 60 pixels. What? Okay, so that's calling. What water does It tries its best to just size it based on what we already understand about the box model. Now, obviously, this is not ideal, cause we've already mentioned that this doesn't work well when we change flex directions. So we have on to other ways of specifying size for flex arms. And that is we can use pixels, all we can use percentages. And I'll show you an example of that right now. Sorry we're gonna do for the third container here is on a set the actual size off these autumns to use pixels So I've got a selected here and it's called dot Fixed value basis container and I'm in a select audience inside that container. And I'm innocent this flex Bisys to be 60 pixels s. So this is every single autumn. If we say that and we scroll down, we can say that every single autumn for that 3rd 1 is 60 pixels wide. So I'll just quickly check that and you can see they're all 60. All right. However, if we decide we're going to change the direction and have it 60 pixels high while the flex basis is retained and I can quickly show this by changing the direction so said fix, value basis container and when you set the flips direction to be home right. But save this and I look at the 3rd 1 again. If we look at the heart of each of the autumns that air in that list, we can see well, it's 62 pixels on the reason why 62 pixels is because of the patty and the fact that the content is bigger, so that combined is slightly bigger than 60 pixels. So if I change this with, say, 70 pixels and save. And then we scrolled in. If I now click on each autumn click on each autumn, you can see that this 70 pixels and it's retained the value regardless of the direction that we've set. If I said it back to ride inside and we come back down, we can still say that this will now be 70 pixels wide cool. So that's the benefits of Flex bases is that we retain the value off the size of the autumns regardless of what direction we're facing. That's pixels. We could also do percentages. So the show that I've got a select a full fluid, very basis container and for this one, I'm gonna set flex basis and we'll say 23%. That's not quite 25 years. We won't see some gap each, and we'll save that if we come down to the fourth autumn there. In fact, I've just done this wrong because I'm gonna apply it to the items, not the container save again, come down. And now we can say we still have the 300 a piece of white container, but we have full items that 23% wide, which happens to be CC'd on pixels around, Sir, if we take 23% of 300 it's probably roughly about 69. Okay, so that's, uh, fixed and fluid values for flicks basis. Now, the last thing I want to quickly show in this video, I is how we can use flex spices in conjunction with growing and shrinking of autumns and the fact that it's growing and shrinky still operates the same way as we've known before. So for this second last container, I'm going to show how things can grow still. So I'm just gonna quickly rise selected for that, and it's gonna be artoms can still growed container. And we're not target. All items, Robby. Yeah, No, we're just gonna talk at the first on first off time because we'll just show that one of them graze. And in this it flex cried toe one and say that if I scroll down, you will say that the growing still works as it has in previous videos and for shrinking. Find out, Come along, explicitly Set these items to be, say, 100 pixels overflows that container we can show shrinking in action as well. So I've got another selected called items can still shrink container ongoing, employ some values, all items. So the first thing we're gonna do is set flicks basis, 200 pixels. So we get some overflowing scrolled in, and we still got shrinkage, and there isn't one. Shrinkage is because I haven't said that zero layoffs said that the Syrian Now if what do you have a flood? And now what I'll do is I'll just sit one of them to be shrunk or to shrink. So it seems the above autumns can still shrink container. I don't first, oh time and so it flight shrink 21 If we say that when we come down, we can say that Autumn one still can shrink. Even when we said the flag spices, however, all the other items to retain that 100 pixels of flex spices. So that's pretty much it for this video. In the next video, we're going to look at some Gutches that can happen with sizing off flex autumns. So see you then 17. Flex Basis Gotchas: Hello, everyone. In this video, we're going to look at flex basis gouaches. So let's get to it. So now that we have a reasonable understanding off like spices, I just wanted to point out a couple of Gutches that you may not necessarily notice straight away. And one of the gouaches that kind of catches people off guard when they first used Flakes box is the zero vs order problem. Now. Basically, what I mean by that is that zero order on this silly sign thing. So zero essentially side. We want to make the overall size of an autumn zero pixels and essentially what ends up happy when we said something zero is that will likely be as big as the content that's inside of it. It will never be zero unless you have no content or you have no patty etcetera OK, otherwise it's just gonna be whatever the content is. Order, however, is similar to that, but not quite the same, so it too will only be Aziz big as the content. But if I specify, saying the case of row with it's going to use that with value. When I said that flex basis to zero. It's not going to use the wind they so flakes basis always overrides with, in the case of wrong direction, unless flick spaces is order. So is that a little bit confusing? Let's see that with the example. So I do's when Chris went to hear called Order Zero Container and a little apply rule toe all the alarms inside that container that will affect this first container here. If I come in and I said, Flex places to zero and save, we're going to see the items do not change in size. And that's because we've got Patty and we've got content so we can actually go to with a zero. So that's expected. Right? There are set this first Orantes order and we'll say that in a minute. Why that's important. I zero container, you don't Adam first off type and I said the flex spaces. So this one order I want to get if I save, we're gonna see no change you, right? And again, that's what we expect. Now if I come upto all the autumns and say I'm gonna actually set a width funnel these autumns and let's say we said 70 pixels if we say this now what we're gonna see is that item one actually grew to be 70 pixels. However, the other three did not. And that's because flex basis off zero overwrites any wit value that we specify. But for the first item, we using a flick Spaces of order, so it will use that with. So that's just the first Gotcha. Just pay attention to because it may be situations in your design me that you may see items be a little bit, begin their expected Just look at the fact that maybe you've got flex basis said toe order in the circumstances. Now, a couple other gouaches that you may see with using flex spaces for the first time is that it will still order men with and maps with and then heart and max hot. So even though it ignores width and height, it will still honor the min and Max is off wind and high. Okay, so let's quickly see those in action. So for the second container over here, I'm gonna set the max with, say, the city pixels. And then I said the flex basis, the 80 pixels, and on top of that, I will make sure that the arms did not shrink. Say dot Max with container and autumn. And is it the max width of each autumn to be 70 pixels? All right, on a set Flex vice iss to be 80 pixels. And just to be careful on the set flexion too busy, right? I don't think I need the flex string here. Know that anyone just to make sure it works. So if I saved his now, now you can see every here that we still have some space remaining inside off the container . Now, generally four by ideas. 320. Sedition of over fund. All right, But it didn't. And the reason why I didn't is because of the fact that we have this Max with off 70 pixels here. So the autumn size Now, if we bring up the developer tuba for that particular container which has now become this one is, in fact, 70 pixels and you can see it right there. So it is honoring the max with, uh So I have a few more examples for men with. So let's say that one in action. So I'm gonna come down. Teoh selected here and got men with kinda autumn. And for this one and a set men with 2 70 pixels and I'm gonna set the flicks basis to 60 pixels. So, ideally, if we're using flex spices and I'm in with, then the IRS should be 60 pieces. Why, however, if I save this and I come down to the third container, we can say it's still seven pixels water each. And that's because we're specified in with to 70 pixels. All right, that's kind of expected based on what we know about Maxygen in wits and flick spices. Now, I could do this two more times for the last two containers, and they're gonna be dealing with hearts. So coming down, I'm gonna sit the men heart. This is Max. It's our Max hearts. Well, I said it was and men heart in the heart. Also, I didn't set maximum in heart to use Kahlo. Let's quickly do that. So Mex and men, we have flex direction, said column. And for this one with this that the Mex hot to be 70 pixels. It's like spices can be 80 pixel seven trying feeling any that on we look it float shrink and then also here will transfer the heart to be 70 pixels. Uh, if we save this when we come down, we can see now that the items in the last two boxes they're still restricting to 70 pixels . And that makes sense because for this box, yeah, with a sitting a Maxwell of 70 about the flex basis is 80. But it's still honoring that Max right side there, 70. And for this last box, we're trying to push it to 60. But the men heart is actually 70. So that's all I want to show in this video. In the next video, we're gonna look at a universal property known as the Flex Property. And that takes into consideration the three sizing properties that we've seen so far, which is flex growing flight shrink and flick spices. So see you then 18. The Flex Property: Hello, everyone. In this video, we're going to look at the flex property, so let's get to it. So before we get started, I just want to mention one thing. And that is I have added a little bit of job script to this example to show pop up whenever we hover over any item in a container. So you so you can see when I click on the window and hover over and autumn here. So number four, we're going to say this little flecks sizing details area that pops out Now it tells us what the treasure autumn that we've currently got selected is. So I had it on four and then gives this this flex property value, which we're about to find out about. And then the flex grow shrink and basis values for that item now for hover over the next one against its is 3 to 1 never hover away, will disappear. Okay, so I just want to quickly point that at the how that set up is a little JavaScript slip it at the bottom here, their official pop up that Js and that does all the work for us Now. If you want to take a look at that. It's up to you. It's just basically JavaScript. It's nothing special. There was just so that it's easier for us to look at what's gonna happen when we make some changes to the thanks property Rivette formed out of that. So with that in mind, what we've seen in the last few videos is how to size autumns in different wise with blood , had it grow autumns, shrink them and had a properly said the initial size of them before any growing or shrinking tight supplies with these concepts in mind, though, is quite common in your designs that you'll want to configure all the sizes at the same time and not separately. To achieve this. From what we know so far, we would have to configure all three properties individually. In other words, the flex growth, like shrink Adam flicks basis Properties would have to be set against the items in question . So we have to come to on the line, and I I I don't know. One on one set Flex Growth zero I wanna set flex shrink to say zero as well. And in the flanks by society, 60 pixels, right But that's it. All three of those properties individually. Obviously, this is not ideal. So if iceboxes addressed this problem by defining a generic probably called flex. Okay. And that's what we're saying here in this little bottle up dialogue. Here is this flex value. So this allows us to configure all the sizing values at the same time. All right, so basically, this is what with this v Aysel about now, the flex property is quite complicated because it has a number of different ways that we consent sizing values for that property. As a result, the flex property can take either one value to values and even three values. So what I have in this example is eight containers on. What we're going to do is look at the different possibilities that we can set out for this flex property. So is staying with this first container? I'm gonna look at the three value of the three values that we consent for the flex property . So open up my flint probably don't see assess, and I'm gonna set a new select the cold three parameter aram that contain up and that choose the first item for all these examples. I'm just gonna affect the first Artemis question, and I'm gonna set this flex fate. Now, how it works with three individual layers is the value for grow goes first. So they say, I wanna have a growth value off three. So I the first item will grow three times more then the rest of the autumns. Then you set the shrink value. So I said I do wanted to shrink, and I wanted to shrink the right ratio one. And then finally you said the flex basis. So in this case, I'm just gonna set to order. And when I say this alongside, we're now going to say that on one has grown, Okay, But the thing that we really care about here is the phase that set for each of those individual items. Now, at the moment, it doesn't look like it's captured it properly. It's probably because we need to refresh. So I'll give this a refresh. And now we get the right values that so you can see their trays. Autumn is one. The flex is now 31 order, which is what we've just set for that. Very. And then we've got the flex ground, which is three. The flex shrink, which is one and flex basis, is still steady. Toe order. If we look at all the other ones, they're unaffected. We can see the flex values 01 order. So if we'll set a flex on the second on, um, explicitly 20 I want what I would we get the same values we have here saying for three saying for four. Okay, so that's the three perimeter way off city, the values individually. So it's always and you don't remember this. It's a wise Garrard shrink and then Bisys Okay, In that case, we might've isis water. Now, you can also use two parameters for flex. And there's actually two ways you can set two different parameters. So the first way that we can look at is saying the grove value and the shrink value Okay, so its able to put that does. So what I've got here is Ace Electrical two parameter grow shrink like that. And then I'd, um, first off time, right side and we got flags and for this one, and they set the grove a 22 on the street value zero. If I say this and we hover over to the second example of here again, I have to refresh. There's a facing If I hover over now we can see that the flex value is set to 20 And then we got this 0%. So when we use two parameters and second parameter happens to be the street value, what flicks box does what the present dust on the scenes is? It set the flex spices to be 0% I the initial sizes, whatever the minimum content sizes can said just a little gotcha there. It's no order. It's in fact zero That, you see grow is 20 ends are upset. Uh, so that's one option with trip around is the other option we have for two parameters is the growth value and then the flex basis and not I'm including the shrink value. So to do that, I'm gonna have to parameter and grow faces. I said are iron first. Oh, God. And for this one, I'm gonna set to flex off zero for grants. We're not gonna have a grind because we want to say the initial size get affected. So 70 pixels fully flick spices here. If I say this and we look at that the third containing here. Now, once again, we have toe give this another refresh for come down. We can see that the treasure was number one. The flex value is zero. Now the shrinks dies is the fault of one. So this will shrink And then the flex Bisys is 70 pixels. Okay, so if you ever include yeah, two values where the growth is the first argument and basis is the second argument while the street value is defaulted to one Enlist somehow up the law and you said it's something else. But at this point, the flex your invaluable was one. If he used the two parameter option, we flipped spices the second value. Now, obviously, that's three. That's two. And now we have a bunch off different options for one perimeter. So the 1st 1 we're gonna say here is referred to as an initial value. So initial flex container on, um first Oh, Todd, like so for flex, we're just gonna set the value initial like this. So what this does is it says, set the flex value or all flights options to their initial values. I in the fall vase. So we vory got a lot of these options or any when we look at and once again refresh. We look at this one here, it's got 01 order. All right there. We didn't set any value for the second option. The first container. So this is the initial settings, right? So if I come down to the first option in the fourth container, you'll also see it has the same values. 01 water. Right? And that's because we're saying with initial use of the false Okay, so if you ever want to go back to the fold flakes box, you get this guy flex calling initial. That's one very you consent for one parameter. Another one we can do is we consider it to none. Throwing a nun flex container, dark eyed. Um, first off, tired, we have flex is none. No, this is gonna do It is a condenser fifth option. Now it's it's basically going to set. Everything will commit to refresh everything to zero and order. So basically, at this point, what we're saying is we don't want teaching that growed. We don't want a thing to shrink and auto means if you remember, flex basis knowledge that we're going to use the width and height values. Otherwise, we're just gonna use the minimum size off the actual item. So I there's no sighting taking place. It'll know flexing is going to take place. Okay, well, we use not so I flex is not. Now, if you will hear next one we'll look at is all right. So we'll all die, flex. I'm tied up dark autumn this off time flexes order like that by saying this and I come down and I before I come down I said, Refresh on this It comes with 61 order. It basically means that we're going to set everything to be on. All right, so it's 11 order. So this one here was Everything's off. This one is everything's basically on, except for flex basis, which is set to auto, which means use with high whatever. Okay, so that's order. Now it's about a guy. The next one that you'll see quite a lot is a numeric value. So enumerate flex container like set the autumn first. Oh my. And when we use a numeric value, say three like that and save I refresh again and come down to the second last one. What if she does, is it treats it like it waas when we're using 31 order. All right, Well, 310 if Well, in this case, we got what I But it's basically 310 So it's like city the parameter option here with 20 except that we don't care about the shrink value and the street value will just default to one. Okay, so in this case, the grove a Xavi affected here and also the flex basis is set to zero. So it's not said toe order, which is that the fault? It's still set to zero. So another thing just to keep out keep an eye on is that when we said a value off a new Rick very for flex or the two parameter numeric values were always going to get a flex basis off 0% Ansett's just got to watch out for now. Finally, the last one is if we set an actual length, I say pixels so they get length only flex container like side. The autumn onset flex to 60 pixels. What we're doing here is we're setting the flex basis value on its own and leaving the grow entering 30 as as the defaults. So say that one last Look, just refresh this quickly scroll down and you can see that in this guy's in fact grow, it has been said so one and shrinking set toe one and basis is set to 60 pixels. Okay, now, I don't remember all the combinations here. I what I generally recommend just to avoid any complication is always trying used the three parameter option because then you know exactly what is always being Sekiya. These Otherwise, I tend the fine get confusing Sometimes, like sometimes I forget if something grows or shrinks or night or whatever. So the best option is just said it to the three values at all times. If you want none and none is basically, you know, 0001% just said zero zero's, You're upset. It's just easier from the naked eye toe. Understand exactly what your city for the flex ground flight shrink and flex basis properties. So that's it for this video. And that's it for this honor. Enough for the section. We got one more video coming up, so I'll see you all then 19. Aligning Individual Flex Items: how everyone in this video we're going to look at Ah, Lonnie individual flex autumns. So let's get to it. So a nice, simple video here, the fish off this section, After all the difficult ones that we've had so far, you know, a lot of size. He wants a little bit difficult to understand. This one will be rough symbol up. Okay. Now, sometimes in a flex container, we may want a specific item to ally itself differently along the cross axes to the rest that they're in the container. Okay, So to do this, we can use the along sell property on the actual individual on itself like that. So basically, we just show some examples of that. So what? I have been friendly, right? The hours, a container with five items in it. The first in town in a leave is what the default is, which is stretch for the 2nd 1 I'm going to set the actual alignment to stretch explicitly on the autumn itself. Then for three of them said to flex start four flicks and and then five were Randolph as sent up. OK, so let's say that in action. So they come to a loin self dot CSS and I have a class elect on the second autumn cold stretch like site, and I said along self to stretch like that. If I save, we're going to say we getting changed on that second autumn because it's already stretching Now for the 3rd 1 I said it to flex start. So if I gotta flex, start like that, which is elected, we have a line. Self is flex start and save that. We can see that Item number three is now long differently. Toe one and two. It's a line to the stain position or start off across axes. So all this stuff, but ties to the cross axes and not the actual main direction. Okay, that's anything to keep it going with oneself. Is it similar to a lot of items except for its on and individual autumn? So moving on, we've got Flex end, which is another selector upon on the fourth on them. They're so align itself his flex end and save that and we could say the forethought and is now at the very end off the cross axes. And then lastly, I've got dot sin Time was selected for the fifth on him, and we got along itself is center and say that and we get the fifth autumn. They are in the center, Okay. And that is it for this video. There's not much else to cover here, and that's it for this section. So I recommend now, if you haven't done so already, going back over the 1st 2 sections. So the one on containers and the one on islands and then when you feel comfortable with everything that we've learned so far, we're gonna actually stopped looking at some real off examples, so see only next video. 20. The Project Work: Hello. Everyone in this video, which is going to quickly look at the project work. Okay, so firstly, congratulations on getting to this point in the class. Now, what I want to talk about in this video is I want to talk about the examples that you be doing as part of your project work. Say we got 10 of them and you'll be asked to complete each one based on some instructions that have set up in the material. Okay, I'll show you the structure of that in a minute. Firstly, let's have a look at what they are. So, for this first example, you're going to take three dips, like so and convention into three equally sized columns like this and they'll have to be full height off the container. Then we could see Well what container here that goes all the way down. So you have to have three columns of equal size going all the way down the screen. That should be pretty easy for you to do it. So that's that one. Nice little started there. Then we've got one when we had a separate simple signed by. So I've got some side by content of the top via and then, like a high traded hitting section. Now this will have to be converted to the following. Well, we do have that side finally on the left and then the remaining content here on the right is to go all the way across the screen, OK, all the way across the container. So that's that one so close that next one is also pretty stressful. And we have some text that's at the top of a container here that's horizontally scented. We just want a vertically century into the middle of container, so going from this to that okay again should be free. Straightforward was that one Not a simple one taking a model, which you might see commonly in a lot of websites. And currently it's in the top left off the overlay, which is covering the whole screen while we need to move it from here into the middle of the screen. OK, so again, I actually, that's pretty easy for you today. Now, for this one, we're going to create a sticky foot. All right, so basically we're sticky. Footer is is it's a foot are that sits on the bottom of your window there here, regardless of the amount of content that exists on the Web patch. So in the case of this, we have a main section that has hardly anything in it. So what you'll need to do is growing in Spain, section down the screen as far as possible, said that it pushes the foot down. So go from this to that right there. Okay, again, Probably pretty easy. But say how you got next one is basically for many of form. So we have a bunch off labels here on the left and then we have a bunch of inputs here on the right. OK, as we can see at the moment, we've got some labels that aren't really aligned properly, like this ones. At the very bottom, we have some inputs here that are right next to the label. What we want to do is have all the labels basically grow to about 2/5 off the available with tea for each right and then we want the imports to be three fits. So basically, if you prefer percentages, the labels will be 40% wide and the imports will be 60% 1. OK, so don't go from this to that. Okay, so that's a little bit made up on top of this, all these labels will be scented vertically inside of H Roy, except for the last one, which will start at the top. Okay, so that's the other thing that left the factor into that. So that's the form there for the next one. It's similar to the previous one, except that we're just going to create a simple little import. All right, so we're gonna use flex box to basically take these three elements that we have here and create a simple little input designed like this. So you left the factor in Yeah, the overall inputs here on the actual road and get him. So they're lining up side by side and then for the text inside of each of these two bids, waiting to be centrally position. OK, so I say you go with that one, and now we start to get into a little bit more complicated stuff. So there's a common layout that designs are asked to do, have their answer. If it was the holy ground lap. And basically what it entails is that you need a header across the entire top off a container, a footer across the entire bottom. And then you have three columns where we have and they have on the left a main section on the in the middle and the side on the right. So you need to basically take these five elements that we have here and create something that looks like that. Okay, so we have a navigation that's a fixed with We haven't aside. That's a fixed with and then we have a main section that grows all the way across. All right, then we got the head and spans old three of vases and footed spends all three days. Okay, More details on the actual sizes of these things will be in the instructions. So that's that one. And then we have what's referred to as the media objects lap for the next example. And all you're really doing here is moving the images inside of these main media block yah . And for each comment to the left off the rest of the content, so look like this. All right, So the images here on the left followed by the remain content for the media item and in fridge. Comment into the images here on the left, following violent. The remaining you mentioned for the comment. And then they'll be some spacing staff and things of that nature again. What details In the instructions says that one. And then lastly, we have some cards, right? So we start off with some sections that look like this, and I want to go after each other on what we want to be out. Do is getting into more of a list structure up like this right here. Now, the key factor here is that all the cards need to be the same heart. All right, The head. It could be a little bit bigger of it needs to bay as it is in this situation. But the buttons must appear at the very bottom of each kind. Like they are here, regardless off the amended text. And they must be the same heart. And there must also be able to be displayed into the sent up off the screen and lined up next to each other. Okay, where is here? They're not. So again. That's played the biggest challenge off all the project. With enough giving you give it a guy. If you're not sure what to do, then you can check out my answer. Or you could basically reject to me now, in terms off the actual project work structure, we have a project material dogs involved. It's included in the resources, and when you unzip it, it'll look a little something like the following. Once I get this resized, you'll get a before and an After. For each scenario, rights is the three column layout. Example. The before will be when you start, so you'll come into here. You'll let up this page and you've got you see, assessing here. Now the base stuff is really just for stylistic purposes. Just toe make it look pretty. So you'll work your way in side off the other sisters far, which has the same name as the folder. Okay, so this is what you'll write your flex box card and apply it to here now for each folder that's here. We also have instructions, don't text, and this will tell you what you need to do in terms off. What I expect from you as well as any signs is and things of that nature OK, so open this up and give it a quick raid and then try the example. And if you stuck. Obviously, I haven't after folder here, where I have the answer to each one. Okay, now, quickly. Just hot. That's he didn't say that, but that's where the answers are in. So this after folder and that's it. So good luck. Have fun. And once again, if you're a little bit concerned on what to do, you can reject to me at any time. And I'll do my best to help you. So that's it. Thank you very much for taking my class, and I hope to see you will in the next one.