Why are there no units on the
On a flex item,
flex-grow takes values that are positive integers to specify a proportion of space to take up in comparison to the other flex items if extra space is available within the flex container. There are no units because the value is a proportion.
I’ll add that the flex-grow value is only relevant in relation to other flex-items that have a flex-grow value defined. Having it defined means that particular child will consume the excess space if present within the parent, but if there are no other flex-child elements with a flex-grow value, it wouldn’t matter if the value was 1 or 100; it would behave the same.
Do correct me if I’m wrong, but here’s how I understood the
By default, flex items will only scale down to fit their parent container. However, if the parent container was larger than the required space to fit all flex items, they wouldn’t scale up. We can change this default behaviour using the
flex-grow property. The
flex-grow property allows flex items to scale up to fit their parent containers. If we set the
flex-grow property of all flex items to 1, they would all take up the same amount of space when scaling up. So if the flex container was 30px wide, each flex item would be 10px wide.
However, we can also set a flex item’s
flex-grow property to a number larger than 1 (E.g. 2 or 3) which represents how much more space this flex item will take up than other flex items. So if we had a flex container with a width of
60px containing 3 flex items, and the first two flex item had a
flex-grow property of 1 while the third had a
flex-grow property of
2, the first two flex item would have a width of
15px while the third flex item would have a width of
This is because setting the third flex item’s
flex-grow property to
2 instructs the CSS compiler to make the third flex item twice as large as the other 2 flex items while still making all of them scale up to fit their flex container. This is the case as the first two flex items have widths of
15px each (
15px * 2 =
30px) and the third flex item has a width of
I believe we’re in agreement. It’s been a while since I played with CSS, but if I recall, my initial comment was based on an observation I had while doing the lesson, which was that within a flex-container, only elements that had
flex-grow defined expanded to fill the container. The value defined is the ratio of the available space allocated to that particular element, but only in relation to other elements in the flex-container that had
The distinction I was trying to make was that for example, if you have three elements in a flex-container and only one has
flex-grow defined, that element would consume all of the excess space regardless of its
flex-grow value, as the other two elements would effectively be
Yeah, of course! What I just discovered from this article (originally on the
flex-shrink property) is that the
flex-grow property actually controls how much leftover space flex items take. This means that if we have a flex item with a
width or a
500px with a
1 and another flex item with a
width or a
50px with a
5 all nested inside a flex container with a
800px, the second flex item will take up 5 times as much leftover space as the first flex item, but, it won’t end up having a larger width than the first flex item
I wonder, then, if padding and margin would impact the display at all. I would imagine the answer to be yes?
I’m not sure I understand your question. Can you elaborate?
I am not sure, if you have to enter integers to flex-grow.
I have just tried 1.5, and it worked quite good. “Positive numbers” is a better term, I guess.
Yes, not only integers can be values of the
Just to add to the existing helpful comments,
flex-grow will only work if there is positive free space. For example if the flex container is 500px and we have 3 items in it, each with a width value of 100px then we have 200px of positive free space (500 - (3 x 100) = 200). Then we can add the
flex-grow property to each item and that will distribute the positive free space according to the values of
flex-grow. MDN has a series of articles that explain EVERYTHING you need to know about flexbox. Specifically about the
flex-grow and the notion of positive and negative free space I recommend reading this article → Flexbox flex items’ flex properties
literally really great addition to better understanding “positive space” and its distribution. thanks.