flex-growについて

flex-growは、flexアイテムの伸び率を指定するプロパティ
下記のサンプルでは、spanがflexアイテムとなります。

sample code

<div class="flex-container row">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

.flex-container{
  display: flex;

  margin-bottom: 1em;
  background-color: black;
}

.row{
  flex-flow: row wrap;

  width: 300px;
  height: 100px;
}

span{
  /* flex-grow , flex-shrink , flex-basisをまとめて記述 */
  flex: 1 1 auto;

  font-size: 1.5em;
  box-shadow: 0 0 0 1px white inset;
}

span:nth-child(1){ background-color: #99CCCC; }
span:nth-child(2){ background-color: #CC99CC; }
span:nth-child(3){ background-color: #CCCC99; }

要素を均等に割り振る

span{
  /* flex-grow , flex-shrink , flex-basisをまとめて記述 */
  flex: 1 1 auto;
}

3つのアイテムのサイズを 1/3 ずつ均等に割り振られます。

特定の要素に多く割り振る

span:nth-child(2){ flex-grow: 5; }

2つ目のアイテムが 5/7となり、
1,3つ目アイテムは 1/7と割り振られます。

transition を使ったデモ

アイテムにカーソルを乗せると...
下記URLで確認できます。
https://jsfiddle.net/junya_5102/19dnqqt1/

リンク

flex-shrinkについて