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. We’re making a flex container and all the children of that container become flex items.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. But can also work vertically.įlexbox is different from many other CSS properties: instead of targeting an element and acting directly upon it, we target the parent element and that controls the layout of its children. It’s specifically good at distributing & aligning elements in a single dimension: generally for making elements fit beside each other on the same line. Flexbox allows you to control the flow of the elements on the page to make more complex layouts-like columns-and helps simply align things in two dimensions.įlexbox is one of many different ways to control the flow & layout of elements in your web design.

Display flex horizontal align