CSS Flexbox Layout II: Align Self, Flex Grow, Flex Shrink and Flex Base
If you’re familiar with some of the basics of the Flexbox Layout model, you are probably aware of several properties for the flex container (the parent container), including flex-direction, justify-content and align-items. Because you apply these properties to the parent container, it organizes and arranges all of the items contained within it. During your Flexbox exploration, you may have encountered other properties that target the individual items within the container. Here we’ll cover a few properties that are designed for the items inside a flex container, and how they impact your layout.
Align-self
Align-self uses the same setting as align-items, but is used to target individual container items themselves rather than the parent container.
Align-self will override the align-items value. For example, if you’re changing the alignment of one item in a row of 4 items, the idea is to set align-items on the parent container to the primary setting you wish, then target one item specifically using align-self.
So your CSS for the above layout could look something like this:
.parent-container {
display: flex;
align-items: flex-start
}.third-child {
align-self: flex-end
}
Flex-grow
Flex-grow and flex-shrink give us more flexibility and allow us to keep applications responsive. Flex-grow controls how much room an item has to expand in a certain direction. That direction is based on the flex-direction. If flex-direction is set to row (default), the direction of expansion would be horizontal, and in a column, the direction would be vertical.
But how much does an item grow? Flex-grow: 0 is the default value of this setting, so unless you specify a different value, the item is not given any additional room to grow.
Flex-grow can be set to any positive integer and is based on ratios. Let’s say we’re making rice and it calls for 1 part rice, 2 parts water. It’s proportionate- we know that however much dry rice we begin with, we need to add 2x that amount of water. If you are making 1 cup of dry rice, you’ll need 2 cups of water, or if you have 5 cups of dry rice, use 10 cups of water. Similarly, if item1 is set to flex-grow: 1 and if item2 is set to flex-grow: 2, then item2 will receive twice as many shares of the available free space to expand.
One common ‘gotchya’ is knowing that this does not necessarily mean that item2 will be twice as large as item1. If the size of those items is exactly the same to begin with, before growing or shrinking, then it may in fact be twice as large. But either way, it will only allow additional room to expand, and that additional space will be twice as large for item2 when compared with item1. Remember to account for the original size that the items are starting with, as this will have an impact in the item size after growing and shrinking.
If all flex items have the same flex grow value, then all items will receive the same share of the available extra space. You can think of this example as ‘equal parts rice and water’ or a 1:1 ratio.
Flex-shrink
Flex-shrink is basically the opposite of flex-grow, determining how much space an item has to shrink.
The default of flex-shrink is 1. By default, an item will shrink but not smaller than the content within it. You can try this out yourself by shrinking your browser — you will see that items will shrink and shift around, but you won’t be able to shrink the browser window smaller than the page content!
Flex-base
Flex-base sets the initial size of the item, before flex-shrink or flex-grow have modified the item’s size. The default value of flex-base is 0.
Setting flex-base to ‘auto’ will set an item to be the same size as it’s content:
flex-base: auto
Targeting specific elements can allow you to have more specific control and customization of items in your layout!
Additional Resources and References
https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/https://flexboxzombies.com/p/flexbox-zombies
