Flex Grow

flex-grow

  • defines the ability for a flex item to grow if necessary

  • dictates what amount of the available space inside the flex container the item should take up

  • a unitless measure that respresents a proportion or ratio

  • flex-grow value overrides the width of the flex-item


.item {
  flex-grow: <number>; /* default 0 */
}

JS Bin on jsbin.com

In the example above, the 2nd flex-item (green box) has its flex-grow set to 2 while the other flex-items have their flex-grow set to 1