ne last piece of our flex lessons is the ability to grow or shrink the space between two elements being flexed together. I have never used flex-shrink. I do use flex-grow often for one specific purpose, to place things on the same line on opposite sides of the screen.

I have often set up my header with an image and title in the left corner and then the navigation menu in the right corner.

I shrunk the screen size in the second picture to show how the space automatically shrinks between them. If we just used justify-content: space between, everything would be evenly spaced out.

The whole header is in a div, which you might call a flex box. It has the display property value of flex.

The image, title, and menu are three divs inside of it. The title, My Times and Colmar Academy, are given the property of flex-grow with the value of 1. If you wanted more than one item in there to grow, you could give them varying numbers based on which you wanted to grow the most, but it’s not a measurement. If you gave the icon image a value of 1 for the property of flex-grow and the title the value of 2 for flex-grow, there would be twice as much space between the title and the menu as the image and the title.

The flex-grow goes on the individual item you want to put a space after, not something you put on the main flexbox.

You can view this lesson. This lesson does a little review of justify and align used with flex.