display: flex;で画像が縦に伸びてしまう原因を解説します。

2024年4月9日

※当サイトはアフィリエイト広告を利用しています

なやむくん

横並びにした画像が縦に伸びてしまう…

なやむさん

いろいろ試したけどうまくいかない…

などの疑問や悩みを解決してまいります。

webページを作成するときにコンテンツを横並びにするため多く活用するあろうdisplay:flex;。

テキストと画像を横並びしたときに画像がなぜか縦に伸びてしまってきれいに表示できなくて悩んだことはありませんか？

今回は上記について解説していきます。

なぜ画像の縦伸びが起きてしまうのか

横並びに以下の画像を使います。

まずはどういうことなのかサンプルコードを見てみましょう。簡単なものを用意しました。

        <section>
            <div class="flex">
                <div>
                    <h1>webページ作成に必要な言語</h1>
                    <p>Webページ作成に必要な言語は以下の通りです。</p>
                    <ul>
                        <li>HTML</li>
                        <li>css</li>
                        <li>Javascript(jQuery)</li>
                    </ul>
                </div>
                <img src="img/img.jpg" alt="">
            </div>
        </section>

section {
    background-color: #eee;
    padding: 50px;
    margin: 0;
}
/*今回の注目コード*/
.flex {
    display: flex;
}
/*ここまで*/
img {
    margin-left: 20px;
}

このコードでWebページを見てみると以下のように表示されます。

このように、画像のもともとのサイズよりも縦に伸ばされた状態になってしまっています。

原因は align-items プロパティの初期値にあります。align-items の初期値は stretch です。

Flexboxを使用したことにより align-items: stretch; が適用され、高さが親要素か子要素の高さの大きい方に合わせた高さになってしまうからなんです。

みつた

記述してないのにこのような現象が起きてしまうので、原因が分からず混乱してしまいますね…

解決策：align-itemsを指定する

解決策は簡単で、align-itemsを指定してあげることで縦に伸びることがなくなります。

align-itemsの主な値は以下の通りです。

    align-items: flex-start;
    /*高さの一番上に配置。上揃い。*/

    align-items: flex-end;
    /*高さの一番下に配置。下揃い。*/

    align-items: center;
    /*高さの真ん中に配置。*/

    align-items: baseline;
    /*ベースラインに配置。*/

    align-items: stretch;
    /*初期値。親要素、もしくは子要素の高さに合わせて伸縮する。*/

今回は真ん中に配置したいので align-items: center; を指定してあげます。

section {
    background-color: #eee;
    padding: 50px;
    margin: 0;
}
/*今回の注目コード*/
.flex {
    display: flex;
    align-items: center;　/*追加コード*/
}
/*ここまで*/
img {
    margin-left: 20px;

すると以下のようになります。

画像の縦伸びが解消されて、きれいに子要素の真ん中に配置されました！