6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」

`flex-grow`と`flex-shrink`のお話です。

# ある日の我が家
<font color="orangered">娘（6歳）「ねぇ、パパ？」</font>

<font color="darkgreen">ワイ「なんや、娘ちゃん？」</font>

<font color="orangered">娘「パパはいつも、お仕事でどれくらいコードを書いてるの？」</font>

<font color="darkgreen">ワイ「どれくらいって、沢山やで」</font>
<font color="darkgreen">ワイ「それはもう**山のように**書いてるで」</font>

<font color="orangered">娘「へー、山のようにかぁ」</font>
<font color="orangered">娘「**動かざること山の如し**って感じ？」</font>

<font color="darkgreen">ワイ「そうそう、ワイのコードはたいがい動かへん・・・コラッ！」</font>
<font color="darkgreen">ワイ「誰が**バグ製造機**やねん」</font>

<font color="FF4F02">娘「ところで、そんなパパに聞きたいことがあるの」</font>

<font color="darkgreen">ワイ「なんや？」</font>

# お買い物サイト製作中

<font color="orangered">娘「実は今ね」</font>
<font color="orangered">娘「お友だちから受注した**ショッピングサイト**を制作してるの」</font>


<font color="darkgreen">ワイ「受注て」</font>
<font color="darkgreen">ワイ「最近の6歳児は受発注すんのかい」</font>
<font color="darkgreen">ワイ「まあええわ、そんでどうしたんや」</font>

<font color="orangered">娘「えっとね」</font>
<font color="orangered">娘「今、デザインデータを見ながらコーディングをしてるんだけど」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/3aec0567-62b8-cd13-c8e8-f378115cb0b2.png" alt="スクショ" width="528">
<font color="orangered">娘「↑このデザインが、CSSで上手く再現できないの」</font>



<font color="darkgreen">ワイ「そうなんか」</font>
<font color="darkgreen">ワイ「ちなみに、今どこまでできてるん？」</font>

<font color="orangered">娘「えっと、説明するね」</font>
<font color="orangered">娘「まずは最初にね」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/03df2838-5ad8-3d78-998a-348bb6e6ca20.png" alt="スクショ" width="528">
<font color="orangered">娘「↑こんな感じになっちゃったの」</font>

<font color="darkgreen">ワイ「ほうほう」</font>

<font color="orangered">娘「ちなみにHTMLはこんな感じ」</font>


```html
  <figure class="box">
    <div class="img">
      <img src="images/candy.png" alt="アメ玉">
    </div>
    <figcaption class="caption">
      <div class="item-info">
        <div>アメ玉（1個）</div>
        <div>¥1,000（税別）</div>
      </div>
      <p>甘くて美味しいアメ玉です</p>
    </figcaption>
  </figure>
````


<font color="darkgreen">ワイ「なるほどな」</font>
<font color="darkgreen">ワイ「`box`っていうクラス名がついた**親要素**があって」</font>
<font color="darkgreen">ワイ「その中に**画像ゾーン**と**商品説明ゾーン**が入っとるわけやな」</font>

<font color="orangered">娘「そんな感じ」</font>
<font color="orangered">娘「それで、画像ゾーンと商品説明ゾーンを**横並び**にしたかったから」</font>
<font color="orangered">娘「親要素を`display: flex;`にしてみたの」</font>

```diff_css:css
    .box {
      width: 500px;
      border: 3px solid;
      border-radius: 6px;
      overflow: hidden;
+     display: flex;
    }
```

<font color="orangered">娘「↑こんな感じ」</font>

<font color="darkgreen">ワイ「なるほどな」</font>

<font color="orangered">娘「でも、そしたらね」</font>
<font color="orangered">娘「横並びにはなったんだけど───」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/50bd4469-a42c-c98e-bab8-2cd79366ea5a.png" alt="スクショ" width="528">
<font color="orangered">娘「↑こう、右側が`160px`くらい余っちゃったの」</font>
<font color="orangered">娘「ほんとは、商品説明ゾーンが伸びてくれるといいんだけど・・・」</font>


# そんな時はflex-grow

<font color="darkgreen">ワイ「なるほどな」</font>
<font color="darkgreen">ワイ「そんな時はこうや」</font>

```diff_css:css
    .img {
      width: 120px;
      height: 120px;
      background-color: paleturquoise;
+     flex-grow: 0;
    }

    .caption {
      background-color: bisque;
      padding: 10px;
+     flex-grow: 1;
    }
```

<font color="orangered">娘「へー」</font>
<font color="orangered">娘「画像ゾーンを`flex-grow: 0;`にして」</font>
<font color="orangered">娘「商品説明ゾーンを`flex-grow: 1;`にしてやるんだね」</font>

<font color="darkgreen">ワイ「せや」</font>
<font color="darkgreen">ワイ「そうすると───」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/a39f9b68-8bd6-d354-7ba4-b70379f54a17.png" alt="スクショ" width="528">
<font color="darkgreen">ワイ「↑こうや」</font>

<font color="orangered">娘「ほんとだ」</font>
<font color="orangered">娘「ちゃんと商品説明ゾーンが伸びてくれたね」</font>

<font color="darkgreen">ワイ「せや」</font>

# flex-growとは

<font color="darkgreen">ワイ「つまり、`flex-grow`いうのは───」</font>

> ワイ「余った空間を埋めるために、子要素を伸ばしたい！」
> ワイ「`160px`くらい余ってるから、その`160px`を」
> ワイ「画像ゾーンと商品説明ゾーンに`0:1`の割合で分けてあげたいんや！」

<font color="darkgreen">ワイ「ってときに使う感じやな」</font>
<font color="darkgreen">ワイ「ちなみに`grow`は**伸びる**って意味やで」</font>

<font color="orangered">娘「なるほどね」</font>
<font color="orangered">娘「`0:1`の割合にしたから」</font>
<font color="orangered">娘「商品説明ゾーンだけが伸びてくれたんだね」</font>

<font color="darkgreen">ワイ「せや」</font>

<font color="orangered">娘「じゃあ、`1:1`の割合にしたら」</font>
<font color="orangered">娘「画像ゾーンと商品説明ゾーンが、両方とも`80px`ずつ伸びるってこと？」</font>
<font color="orangered">娘「ちょっとやってみよ」</font>

```diff_css:css
    .img {
      width: 120px;
      height: 120px;
      background-color: paleturquoise;
+     flex-grow: 1;
    }

    .caption {
      background-color: bisque;
      padding: 10px;
+     flex-grow: 1;
    }
```

<font color="orangered">娘「↑こうすると───」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/e559a881-6c6e-3552-739b-f4617a6b797c.png" alt="スクショ" width="528">
<font color="orangered">娘「あ、ほんとだ」</font>
<font color="orangered">娘「画像ゾーンも商品説明ゾーンも、両方`80px`くらい伸びた」</font>

<font color="darkgreen">ワイ「そういうことやな」</font>
<font color="darkgreen">ワイ「ちなみに`flex-grow`のデフォルト値は`0`やから」</font>

```diff_css:css
    .img {
      width: 120px;
      height: 120px;
      background-color: paleturquoise;
      /* flex-grow: 0; */
    }
```

<font color="darkgreen">ワイ「↑こんな感じで、`flex-grow: 0;`は書かんくてもええで」</font>

<font color="orangered">娘「なるほどね」</font>
<font color="orangered">娘「商品説明ゾーンの方だけを伸ばしたい場合は」</font>
<font color="orangered">娘「商品説明ゾーンを`flex-grow: 1;`にして」</font>
<font color="orangered">娘「画像ゾーンは`flex-grow`指定なしでいいんだね」</font>

<font color="darkgreen">ワイ「そういうことやな」</font>

<font color="orangered">娘「ありがとう、パパ！」</font>

<font color="darkgreen">ワイ「ゲヘヘ、かまへん！かまへん！」</font>

# しかし、またまた問題が

<font color="orangered">娘「パパ、大変！」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/fae0a958-e961-2c3b-008c-88f9c42f673a.png" alt="スクショ" width="528">
<font color="orangered">娘「試しに、商品説明ゾーンの`width`を`1000px`にしてみたら」</font>
<font color="orangered">娘「アメちゃんの横幅が**小さく**なっちゃったの！」</font>

<font color="darkgreen">ワイ「（なぜそんな無駄なことをした・・・？）」</font>
<font color="darkgreen">ワイ「ああ、スペースが足りんと子要素たちは縮んでしまうからな」</font>

<font color="orangered">娘「どうすればいいの・・・？」</font>


# そんな時はflex-shrink

<font color="darkgreen">ワイ「そんな時は、縮めたくない子要素に`flex-shrink: 0;`を指定してやるんや」</font>

```diff_css:css
    .img {
      width: 120px;
      height: 120px;
      background-color: paleturquoise;
+     flex-shrink: 0;
    }
```

<font color="darkgreen">ワイ「↑こうやな」</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/1ecc1ca6-1eb4-b197-ba39-8cbebeca0138.png" alt="スクショ" width="528">
<font color="orangered">娘「あ、直った！」</font>

<font color="darkgreen">ワイ「`shrink`は**縮む**って意味やから」</font>

> ワイ「縮みを`0`にしてくれや！」

<font color="darkgreen">ワイ「って感じやな」</font>

<font color="orangered">娘「なるほどね」</font>

<font color="darkgreen">ワイ「`flex-shrink`は、初期値が`1`になっててな」</font>
<font color="darkgreen">ワイ「スペースが足りない場合、子要素たちはデフォルトで縮んでしまうんや」</font>

<font color="orangered">娘「そっか」</font>
<font color="orangered">娘「縮めたくない子要素には`flex-shrink: 0;`を指定すればいいんだね」</font>

<font color="darkgreen">ワイ「そういうことやな」</font>

# ちなみに

<font color="orangered">娘「パパ、例えばスペースが`200px`足りない場合には」</font>
<font color="orangered">娘「2つの子要素が`100px`ずつ縮むの？」</font>

<font color="darkgreen">ワイ「いや、2つの子要素に`flex-shrink: 1;`を指定したとしても」</font>
<font color="darkgreen">ワイ「`1:1`の割合で`100px`ずつ縮むわけではないんや」</font>
<font color="darkgreen">ワイ「大きい要素と小さい要素があるのに、両方とも`100px`ずつ縮むと」</font>
<font color="darkgreen">ワイ「小さい方の要素が`0px`になってしまうこともあるからな」</font>
<font color="darkgreen">ワイ「そこは、大きい方の要素が**多めに縮んでくれたり**するんや」</font>

<font color="orangered">娘「そっか」</font>

> 大きい要素「ワイは元々の図体がデカイから、多めに縮んどくわ・・・」

<font color="orangered">娘「↑こんな感じなんだね」</font>

<font color="darkgreen">ワイ「せやな」</font>


# まとめ

- `flex-grow`
  - 空間が余った場合の、子要素達の**伸び具合**を調整する
  - 親要素ではなく、子要素に指定する
  - `0`だと伸びない
  - 大きい数値を指定するとよく伸びる
  - 初期値は`0`
- `flex-shrink`
  - 空間が足りない場合の、子要素達の**縮み具合**を調整する
  - 親要素ではなく、子要素に指定する
  - `0`だと縮まない
  - 大きい数値を指定するとよく縮む
  - 初期値は`1`

<font color="darkgreen">ワイ「って感じやな」</font>
<font color="darkgreen">ワイ「`float`で横並びにしてた時代に比べると、だいぶ便利になったもんや」</font>

<font color="orangered">娘「ふろうと・・・？」</font>
<font color="orangered">娘「将来のパパのこと？」</font>

<font color="darkgreen">ワイ「いやそれは**浮浪者**・・・コラッ！」</font>
<font color="darkgreen">ワイ「誰が**浮浪者見習い**やねん」</font>
<font color="darkgreen">ワイ「`float`や、`float`」</font>
<font color="darkgreen">ワイ「昔は`float`で横並びにしてたんや」</font>

<font color="orangered">娘「へ〜」</font>

# それにしても

<font color="darkgreen">ワイ「それにしても、アメ玉が**1個1,000円**ってどうなん？」</font>
<font color="darkgreen">ワイ「売れへんのとちゃう？」</font>

<font color="orangered">娘「えっとね、たぶん大丈夫だよ」</font>
<font color="orangered">娘「近所の駄菓子屋のアメ玉をぜんぶ**買い占めて**」</font>
<font color="orangered">娘「このショッピングサイトで売るの」</font>
<font color="orangered">娘「だから近所の子たちは、このサイトで買うしかないの」</font>
<font color="orangered">娘「だから大丈夫なの」</font>

<font color="darkgreen">ワイ「いやそれ**転売ヤー**やないかい」</font>
<font color="darkgreen">ワイ「なんも大丈夫とちゃうわ」</font>

<font color="orangered">娘「パパ、おまわりさんには内緒だよ？」</font>

<font color="darkgreen">ワイ「ええ加減にせぇ」</font>
<font color="darkgreen">ワイ「やめさせてもらうわ」</font>

**〜ありがとうございました〜**

# 参考サイト
- [flex-grow - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow)
- [flex-shrink - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink)
- [CSS Flexible Box Layout Module Level 1](https://drafts.csswg.org/css-flexbox-1/)