CSS | 画像を上揃え、または下揃えで並べる方法
このページでは、大きさの違う画像を並べた際に上揃え（上寄せ、上付き）、または下揃え（下寄せ）に表示する方法とCSSのサンプルコードを紹介しています。
画像を上揃え（上寄せ）で並べる
画像を横に並べた際、通常は下揃え（下寄せ）で表示されますが親要素で「display: flex」を指定している場合は上揃え（上寄せ、上付き）で表示されるようになります。
これは、「display: flex」指定時にデフォルトで「align-items」プロパティに「stretch」が設定されている為です。
「stretch」は上揃え、下揃えという意味では「flex-start」と同等になります。
「display: flex」での上揃えに関しては、並びの方向などの変更していない限り、特に値を変更する必要はありません。
<div class="flex-start">
<img style="width: 200px; height:200px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img style="width: 100px; height:100px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img style="width: 150px; height:150px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
</div>.flex-start {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 5px;
}画像を下揃え（下寄せ）で並べる
「display: flex」で並べた画像を下揃えにする場合は「align-items」プロパティに「flex-end」を指定する事で実装できます。
<div class="flex-end">
<img style="width: 200px; height:200px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img style="width: 100px; height:100px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
<img style="width: 150px; height:150px;" src="https://1-notes.com/wp-content/uploads/2023/06/slime-3.png" alt="">
</div>.flex-end {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: flex-end;
margin: 5px;
}