Bricks Theme - A comprehensive guide of Flex grow, shrink and basis

hi everyone welcome to mr nine videos channel in this video you will learn the sizing properties of flex container i mean flex grow flex shrink and flex bases how they work and in which situation we can use it to explain these properties i have created one container and added three items inside it now let's talk about flex grow currently the size of these boxes is set to 100 pixel and we have plenty of extra space with flex grow we can allow these items to grow and take up the available space by default the flex grow is set to zero that's why our boxes are not growing now if i select the first box and give it a one factor it will start growing and take up the entire free space the other two items are not growing because its flex grow value is zero if you want all these boxes grow on the same rate then set let's grow each item to one now you can see these boxes are growing at the same rate and the free space is equally distributed between them you can change the growth factor for any item for example for a first box we can say grow to zero it will prevent the first box from growing so now all the available space is allocated to second and third boxes if i select the first box again and change the flex grow to two now you can see the first has grown more than the other boxes you might be wondering why the first box is not twice of the other boxes well this is common misconception about the flex crow property just because we have said two or the first box it doesn't mean that this box will get twice of the other boxes let me explain how growing work back to the original situation we have plenty of space here when we set the flex grow property the browser is going to look the growth factor of each boxes for the first box we have said the growth factor two and for the other two boxes we have set the growth factor to one two plus one plus one is equal to four so the browser is going to take up the entire available space divided by four slices then it's gonna allocate two slices to a one slice to b and one slice to c this is how this algorithm work now let's talk about flex sharing lecturing is the opposite of flex grow it tells the browser how these elements should shrink if there is not enough space to fit in the container so for this demo i have changed the size of boxes and set flex array to downrape so these boxes will not wrap to a next line the default value of rich string is one our boxes are bigger to see the changing go to preview mode now if you will resize the browser window look they are shrinking at the same rate now let's back to builder if you will set the flex sharing vector to 0 it will stop shrinking let me show now see in the preview mode now you can see the first box is not shrinking now let's talk about flex bases you can use the flex basis property to set the initial size of text item by default it is set to auto means the browser is gonna look at the width and height property of these items you will change this from auto it will change the width or height depending on flex direction the flex direction is set to horizontal the flex spaces will overwrite the width property let me show now you can see the width of this box is changed or remove it but if you will change the direction of main container from horizontal to vertical it will overwrite the height property let me show now you can see the height is changed with the help of flex basin you can change the width or height of any box you want let's change the third box size the flex bases property sometimes very useful in a situation where you want to change the direction from vertical to horizontal or horizontal to vertical in different break points thanks for watching and subscribe my channel see you in the next video

Channel: Mr9 Videos

Views: 264

Keywords: Flex grow and shrink and basis, Bricks builder tutorial

Id: YRE-tqSG_BA

Length: 5min 13sec (313 seconds)

Published: Wed Nov 10 2021