Growing Flex Items3:42 with Guil Hernandez
With flexbox you can make flex items grow or shrink in relation to other flex items and the available space inside the flex container.
flex-growproperty applies to flex items only.
flex-growdetermines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.
1expands flex items to take up the full space of a line.
- The higher the
flex-growvalue, the more an item grows relative to the other items.
With flex box you can make flex items grow or shrink in relation to the other flex 0:00 items and the available space inside the flex container. 0:05 For example, I can expand the flex items so 0:09 that they fill up the entire flex container. 0:12 Then I can expand the first, second, 0:15 or any flex item to take up more space in the container. 0:17 The flex-grow property determines how much of the available space 0:21 inside the flex-container an item should take up. 0:25 So, it assigns more or less space to flex items. 0:28 By default, flex items in a flex container do not take up the full space of a line. 0:32 But, you can expand the flex items so 0:39 that they fill up the entire line using the flex grow property. 0:41 Back in my workspace, inside flexbox.css, I'm going to target 0:46 all the flex items by creating a new rule that targets the class item. 0:51 Then I'm going to give them a flex-grow property. 0:58 The default value for flex-grow is zero. 1:02 The flexed items do not expand. 1:06 So watch what happens when I set their flex-grow value to 1. 1:09 Now all the items have the same size in the container. 1:17 The flex items expand to take up the full space of a line. 1:21 Even as the flex container gets narrower, the flex items adjust to the width. 1:25 When the flex container can no longer distribute an equal amount of space on one 1:33 line, It breaks items on to a second line where it also gives the items equal space. 1:38 So notice how item six expands to take up the full space of the second line and once 1:45 item five moves down to the second line they each take up half the line and so on. 1:51 So this is a handy feature for building responsive layouts. 1:58 For instance, you can display a certain number of equal width columns on one row 2:02 on wide desktop screens. 2:07 Then on smaller screens where the row will be much narrower, 2:09 some of the columns appear on a second or third line. 2:13 The higher the flex grow value, the more an item grows relative to the other items. 2:17 So, for instance, if I go back to the style sheet and 2:21 if I create a new rule that targets item three, 2:26 and give it a flex grow value of two. 2:31 So for every bit of space the other flex items get on one line, 2:35 Item 3 will always get twice as much of that space. 2:39 And if I go back to the item 3 rule and change the flex grow value to 3, 2:44 this will give it three times the amount of space .So again, 2:50 this is great for building flexible columns. 2:55 Say I'm creating a two column layout. 2:59 So for instance, I'll go over to my HTML file and 3:01 comment out all but items one and two. 3:05 So this for example can be a main content column and a sidebar. 3:09 So now I can go back to my style sheet and give the main column a larger flex grow 3:15 .so i'll target item one and set its flex grow to four. 3:21 This way it will always take up four times as much space 3:26 as the sidebar The flex-grow property applies to flex items only. 3:31 If you apply flex-grow to a flex container, it will have no effect on it. 3:37
You need to sign up for Treehouse in order to download course files.Sign up