目次
flex-growやflex-shrinkに関する記事
最近このような記事があった。
例えばこのような構造の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;
}
この問題を解消するには.captionにflex-grow: 1を付けて子要素を伸ばせば良いと記事には書かれてある。
.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-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; } の指定がある場合
imgにはmax-width: 100%;が必要
元記事には書かれていないが、imgタグにmax-width: 100%;の指定がないと.img { width: 200px; } のように幅を指定しても、画像が大きい場合は、はみ出して表示が崩れるので必ず指定しなければならない。