![]() 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. |