Comments on: flex-grow

By: Axel

Axel — Fri, 03 May 2019 09:22:23 +0000

This is wrong. Flex-grow does not dictate a proportion of space that an item takes, unless flex-basis is zero. It dictates the size of the proportion of extra space an item uses, if there is extra space after each items width is accounted for. The difference is big.

By: marco

marco — Mon, 18 Feb 2019 18:02:39 +0000

Hi, Great explanation!!!

I want to create a separator to increase/decrease two flex elements , what is the best way to do that??

By: Sandy

Sandy — Thu, 22 Sep 2016 13:26:41 +0000

Well Explained !!!

By: Robbert

Robbert — Fri, 15 Jul 2016 13:46:12 +0000

In reply to Peter. That's correct! You've explained it very clearly.

By: Peter

Peter — Thu, 23 Jun 2016 08:03:49 +0000

“For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.”

This isn’t correct? It’s my understanding that flex-grow distributes the available white-space, it does not control the final width of the element. The child with flex-grow set to 2, would only be twice as wide if none of the children have any content.

You can see that in the CodePen example; as soon as you start entering more text in one flex-item box, the widths of all the boxes change.

Flex-grow distributes available white-space, not the absolute width, at least in my understanding.

By: Jonatan

Jonatan — Mon, 05 Oct 2015 12:43:28 +0000

Perfectly explained. Clear and to the point. Thanks.

By: Umberto

Umberto — Thu, 18 Sep 2014 08:23:25 +0000

In reply to Sergey.

Just an update:
Safari 6.1+ supports -webkit-flex-grow

http://www.w3schools.com/cssref/css3_pr_flex-grow.asp

By: Sergey

Sergey — Thu, 27 Mar 2014 12:58:30 +0000

All Safari not supported flex-grow