CSSのflexboxでflex-growやflex-shrink使用時の注意点

flex-growやflex-shrinkに関する記事

最近このような記事があった。

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

例えばこのような構造のHTMLがあったとして場合

<div class="box">
  <div class="img">
    <img src="https://iwb.jp/wp-content/uploads/2021/08/lovelive-anime-yuigaoka-onden-jinja-omamori-768x512.jpg" alt="穏田神社御守">
  </div>
  <div class="caption">
      <div>穏田神社御守</div>
      <div>¥800</div>
  </div>
</div>

CSSで.boxにdisplay: flexを指定してもflex-growのデフォルト値は0のため.caption部分は自動で伸びず、右側に余白ができてしまう。

img {
  max-width: 100%;
}

.box {
  display: flex;
  border: 3px solid;
}

.img {
  width: 200px;
  background-color: red;
}

.caption {
  background: bisque;
  padding: 20px;
}
穏田神社御守
穏田神社御守
¥800

この問題を解消するには.captionにflex-grow: 1を付けて子要素を伸ばせば良いと記事には書かれてある。

穏田神社御守
穏田神社御守
¥800
.caption {
  flex-grow: 1;
  background: bisque;
  padding: 20px;
}

flex-growよりflexのほうが短く書ける

flex-grow: 1; はCSSのショートハンドでflex: 1; と書くこともできるので、指定するならこちらのほうが良い。

.caption {
  flex: 1;
  background: bisque;
  padding: 20px;
}

flex-growだとgrowをglowと書き間違えるケースが多いからだ。

flex-glowのTwitter検索結果

flex-shrinkもflexで短く書ける

flex-shrink: 0; はCSSのショートハンドでflex: 0 0; で書くこともできる。

flexの最初がflex-growなので flex: 0 0; は flex-grow: 0; flex-shrink: 0; と同じ。

imgにはvertical-align: middle;が必要

画像の下に赤の背景色が見えているのに気づいたと思うが、imgタグにvertical-align: middle;を指定していないとこうなるので必ず指定したほうが良い。

img {
  max-width: 100%;
  vertical-align: middle;
}

img { vertical-align: middle; } の指定がある場合

穏田神社御守
穏田神社御守
¥800

imgにはmax-width: 100%;が必要

元記事には書かれていないが、imgタグにmax-width: 100%;の指定がないと.img { width: 200px; } のように幅を指定しても、画像が大きい場合は、はみ出して表示が崩れるので必ず指定しなければならない。

img { max-width: 100%; } の指定がない場合

穏田神社御守
穏田神社御守
¥800
カテゴリーcss