ここでは、ReactでWEBアプリの画面を作っているときに、挿入した画像を縦に並べたい場合の方法を紹介していきたいと思います。
完成形はコチラ↓
通常<img>タグをそのまま使うと、画像が下図の様に横並びになってしまいます。もともと横に並べるつもりならこれでOKなのですが、縦に並べたい時もありますよね。
現状のコードはこのようになっていますが、
<img src="SAMPLE1.png" alt="サンプル画像1" />
<img src="SAMPLE2.png" alt="サンプル画像2" />
これをこんな風に変えてあげます。
<Box sx={{ display: "flex", flexDirection: "column" }}>
<img src="SAMPLE1.png" alt="サンプル画像1" />
<img src="SAMPLE2.png" alt="サンプル画像2" />
</Box>
sx ={{ }}を省略して記載することも可能です。そのときは、「：」を「＝」に変えてください。
<Box display="flex" flexDirection="column" >
<img src="SAMPLE1.png" alt="サンプル画像1"/>
<img src="SAMPLE2.png" alt="サンプル画像2"/>
</Box>
このとき、縦に並べたいときのポイントは以下の３つ。
<img>タグを<Box>タグで括る
<Box>タグは、読んで字の如く箱のようなものです。この箱には、いろんなスタイル（色、大きさ、位置など）を簡単に追加できる特別な機能があります。
例えば、「この箱（Box）を画面の真ん中に置きたい、背景を青くしたい」と思ったら、その指示を直接<Box>タグに伝えるだけで、コードで「真ん中に置く」だとか「背景を青くする」といったことが、直接指定できるんです。これによって、ウェブページを作る時に、部品（コンポーネント）の配置や見た目を簡単に整えられるようになります。
“display:flex”
次に、display: flex;とは、ウェブページ上でモノ（テキストや画像など）をどう配置するか、といったルールを決めるための設定の一つです。<Box>タグにdisplay="flex"って書くと、「この<Box>タグの中に入れたモノは、フレキシブル（柔軟）に配置してね」という指示になります。
フレックスボックス（Flexbox）っていうシステムを使うと、モノを縦に並べたり横に並べたり、スペースに応じて大きさを変えたりするのがすごく簡単にできるようになります。例えば、画面の大きさが変わっても、中のモノがきれいに並ぶように自動で調整してくれたりするんです。例えばこんなことができます。
-
横に並べる：
デフォルトでは、フレックスボックスは中のモノを横に並べます。
でも、これは変えることができて、「縦に並べて！」とか指示することもできます。 -
スペースの配分：
中のモノの間のスペースを均等にしたり、端に寄せたり、真ん中に寄せたりすることができます。 -
余白のカスタマイズ：
中のモノ同士の隙間を自由に変えられます。
display="flex"を使うことで、レイアウトをもっと自由に、そして簡単に作ることができるようになります。
“flexDirection: column”
最後に、flexDirection: column;とは、display: flex;で作られるフレックスボックス内のアイテム（モノ）をどう並べるか、っていうルールを指定するものです。デフォルトでは、フレックスボックスはアイテムを横並びにしますが、flexDirection: column;を使うと、「アイテムを縦並びにしてね」と指示していることになります。
つまり、この設定をした<Box>タグがあると、その中に入れたモノ（テキスト、画像、他のボックスなど）が上から下へと順番に並ぶことになります。
ちなみに先述したdisplay="flex"を設定したことで実現できる使い方の例も紹介します。下の画像が変更前の状態です。（ここでは、変化が視覚的にわかりやすいように周囲にパーツを追加してみました。）
スペースの配分について見ていきましょう。
<Box sx={{ display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
<img src="SAMPLE1.png" alt="サンプル画像1" />
<img src="SAMPLE2.png" alt="サンプル画像2" />
</Box>
justifyContent="flex-end"を追加で設定してみると、
このように、２つの画像を下端に揃えることができました。他にも、"center" で中央揃えにしたり、"space-between" で等間隔に配置することもできます。
余白のカスタマイズについて見ていきましょう。
<Box sx={{ display: "flex", flexDirection: "column", rowGap:"20px" }}>
<img src="SAMPLE1.png" alt="サンプル画像1" />
<img src="SAMPLE2.png" alt="サンプル画像2" />
</Box>
rowGap: "20px" を追加で設定することで、
２つの画像の間に20ピクセルの余白ができました。ここは数値を変えることで余白の大きさを変えることができます。
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Box order={2}>
<img src="SAMPLE1.png" alt="サンプル画像1" />
</Box>
<Box order={1}>
<img src="SAMPLE2.png" alt="サンプル画像2" />
</Box>
</Box>
また、新たにそれぞれの画像について<Box>で括ってあげて、order={[ここに数字が入る]} を追加することで、
配置する画像の順番を変えることもできます。ここでは、画像が上下逆になっていますね。これは、2枚目の画像を1番目に表示するよう設定したため、このようになっています。
まとめ
画像を縦に並べたい時は、画像のタグを<Box>タグで括ってあげて、「display:flex」「flexDirection:column」という設定を追記してあげると実現する。
Discussion