こんにちは、kz_moritaです。 普段は iOS エンジニアとして Swift を書いたり、Vue.js / Nuxt.js あたりで Web フロントを書いたりしているエンジニアです。 今回は、CSS の Flexbox を使って以下のような良く見る感じのリストを作ってみます。 先に結論 以下のように書くことで実現できました。 以下順番に説明をしていきます。 なおスタイルは SCSS で書いています。 HTML を用意する まず以下のような HTML を用意します。 <ul> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text">テキスト1</span> </li> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text" >テキスト2/テキスト2/テキスト2/テキスト2/テキスト2/テキスト2</span > </li> <li> <img src="https://picsum.photos/80/80" class="thumbnail" width="80" height="80" /> <span class="text" >テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/テキスト3/</span > </li> </ul> 表示するともちろん以下のように何も修飾されていない HTML が表示されます。 ここから CSS を当てていきます。