[HTML][CSS]display flexを使い画像を配置する。

例:画像4つをdisplay flexを使って折り返すよう配置する。

●HTML
画像全体をdivで囲い、親要素としてclass=”flexImageBox”を設定する。
個々の画像に対して子要素としてclass=”flexImageItem”を設定する。

<div class="flexImageBox"> 
 <img src="../img/01.jpg" class="flexImageItem"> 
 <img src="../img/02.jpg" class="flexImageItem"> 
 <img src="../img/03.jpg" class="flexImageItem"> 
 <img src="../img/04.jpg" class="flexImageItem"> 
</div>

●CSS
○親要素.flexImageBoxに対する設定は主に配置や揃え方
display: flex;    フレックス化する
flex-wrap: wrap;  折り返しをする これを設定しない場合は横一列に並ぶ
を今回は設定

.flexImageBox {
  display: flex;
  flex-wrap: wrap;
}

.flexImageItem {
  padding:  10px;
}

そのほかに、
align-items:  center  縦方向に中央ぞろえ
justify-content:   flex-end;  子要素を右寄せ
justify-content: space-between;   子要素を 等間隔配置 など有り

○子要素.flexImageItemに対する設定、主にそれぞれの幅の調整
padding: 10px; 個々の画像にパディングを設定

そのほかに、
width: 50%;と設定で個々の画像が全体の50%の幅となり、2列ずつの配置となる。

その他のCSS設定は以下も参考に
並び方の順序や揃え方を指定可能になる
https://web-bruno.com/flexbox-css3/
https://www.sejuku.net/blog/56401