CSSのflexbox（display:flex;）で、写真/画像を横並びにする。inline-blockやfloat:leftは使わない。＋ <div>の横幅一杯に画像を並べてリサイザブル（レスポンシブ）にする。

Webページで写真/画像を横並びにする方法として、以前は

• display: inline-block;
• display: table-cell;
• float: left;

などを使っていた。どれもあまり使いやすいとは言えなかった。

CSS3から新しいレイアウトモジュールとして、flexbox

• display: flex;

が追加された。この「display:flex;」を使えば、画像を簡単に横並びにできる。<div>に「display:flex;」を指定するだけで<div>内の画像は横並びになる。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
</style>
<div class="box-row">
	<img src="img/001.jpg">
	<img src="img/002.jpg">
	<img src="img/003.jpg">
	.....
</div>

更に、<div>の横幅一杯に画像を並べて表示し、ブラウザウィンドウのリサイズに合わせて画像がリサイズするようにするのも簡単。サイズの大き目な画像を用意し、<img>それぞれを<div>で囲み、<img>に「max-width:100%;」を指定するだけ。画像の個数に関係なく、<div>の横幅一杯に画像が並ぶ。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.box-row img {
	max-width: 100%;
}
</style>
<div class="box-row">
	<div><img src="img/001.jpg"></div>
	<div><img src="img/002.jpg"></div>
	<div><img src="img/003.jpg"></div>
	.....
</div>

↓↓↓　作成したサンプルHTMLが以下。

HTML/CSS「flexbox」サンプル

【補足】display:flex;内のアイテムをブラウザ横幅で折り返したい場合は、「flex-wrap : wrap;」を指定する。

#div-id {
	display: flex;
	flex-wrap: wrap;
}

「flex-wrap : wrap;」を使ったサンプル（↓）。