Let's first look at a flex container where none of the items have flex-grow set.īy setting flex-shrink to 2 we are saying that the first element should lose 2 parts of the overflown space while the other two elements each only lose 1 part since they are set to a flex-shrink of 1 by default. By default this property is set to 0 which means the item does not get any extra space. The flex-grow property is a property you define on a flex item and it tells the item how much of the extra space that item is allowed to take to fill its container. First I want to talk about flex-grow since it is the most common property you will use. This is done via 3 different properties flex-grow, flex-shrink, and flex-basis. The real power of flexbox is not in its layout properties (even though, those are amazing), but in its ability to resize items based on the size of other elements on your page. Now we come to what is probably the most confusing part of flexbox which is sizing the individual items, but I promise you I will make it as easy as possible to understand. One important thing to note, though, is that there is no way to do justify-self since all justification is taken care of by the parent only. This align-self property can be used with any of the align-items values to place each item in the container exactly where you want them. As you can see from the above example we set the align-self property of the first child to flex-end and it is now aligned at the bottom of our cross axis even though the flex container as a whole has an align-items of flex-start.
0 Comments
Leave a Reply. |