flex: コンテンツの中で要素の幅を割合で決める

練習でとあるサイトの模写に挑戦したところ、ある section の中に画像が3枚横並びになっていて、ウインドウのサイズとともに伸縮するものがありました。

ディベロッパーツールを見ると

flex: 2;

という見慣れないCSS記述が。

調べたところ flex-grow（flex ）というCSSで flex コンテナを1：2のようにサイズを切り分けて flex コンテンツのサイズを表示させることができるようです。

.pink {flex: 2;}

.green {flex: 1;}

こんな記述をCSSに加えるだけで親要素の中で1：2の割合で表示できます。

 

つまづいたポイントとやったこと

• img 要素のクラスを付与してCSSを記述してもダメだった（インライン要素だからかな？）
• div に対して width を指定しても反映されなかったため、div の中の img にクラスをつけて width 指定したところ反映された（flex で比率を指定しているから div に対しては効かないのか？）
• img 要素の上に div を作り、そのクラスに対してCSSを記述するときちんと表示された

 

実際のHTMLとCSSはこちらです。

今回は3枚の画像を一つの flex コンテナの中で横並びにしました。

 

HTML

        <div class="topimgL">

            <img src="images/topimgL.png">

        </div>

        <div class="topimgC">

            <img src="images/topimgC.png">

        </div>

        <div class="topimg-zousan">

            <img src="images/topimg-zousan.png">

        </div>

CSS

.topimgL {

flex: 1;

}

.topimgC {

flex: 0.8;

}

.topimg-zousan {

flex: 2;

}

parashuto.com

このCSS記述全く知らなかったのですが私の勉強不足ですね。

コンテンツの横並びやら謎の余白やらは初心者（私含め）の方がつまづくポイントだと思うので早く理解したいのですが何回やっても分からないことが多すぎます・・・