Imomemo

色々とやっていきたい

CSSにdisplay:flex;を指定すると、子要素の画像が勝手に縮小される

色々良い感じにやってくれるflexだけど、画像を勝手に縮小してしまうことがある

<div class="flex_box">
    <p><img src="./sample.jpg" alt="説明"></p>
    <div>
        何か長い文章
    </div>
</div>

<styles>
.flex_box {
    display: flex;
}
</styles>

こんな感じにしていると、要素の横幅次第では画像が勝手に縮小されることがあります。
これが起こるのはテキストの部分が長文であるときです。

子要素に

.flex_box p {
    flex: none;
}

こんな感じでflex:none;を指定すると想定通り通常サイズで画像が表示されます。