flexboxはサザエさんで説明したら、わかりやすいんじゃないかと思って磯野家で解説してみます。flexboxが苦手だ・・・と感じているかもしれませんが、難しく考えすぎなくて大丈夫です。

flexboxは

• 親子構造をつくる
• 指示を出すのは親、動くのは子

これだけです。

<div class="isonoke">→**オレンジの枠部分**
   【親】<div class="namihei">→**波平部分（背景として波平を入れてます）**
       【子】<div class="namihei-child sazae">→サザエ
                <img src="images/sazae2.png" alt="">
                <p>[子]サザエ</p>
            </div>
	    【子】<div class="namihei-child katsuo">→カツオ
                <img src="images/katsuo.png" alt="">
                <p>[子]カツオ</p>
            </div>
       【子】<div class="namihei-child wakame">→ワカメ
                <img src="images/wakame.png" alt="">
                <p>[子]ワカメ</p>
            </div>
        </div>
    </div>

namiheiを親とし、

• sazae
• katsuo
• wakame

を子どもとしています。sazae,katuso,wakameにはそれぞれ画像とテキストを入れています。そしてそれらを一番大きなisonokeで包んでいます。（枠線付けたり、背景つけたりしてるんですがメインはそこじゃないのでコードは省きますね。）

flexboxは親が指示を出して子供を動かします。だから命令はnamihei（親）に出してもらいます。

波平が**横並びになれ！**と言ってますね。namiheiにdisplay:flex;を記述します。

.namihei {
    display: flex;
}