HTML/CSS「flexbox」サンプル

CSSの「display:flex;」で、写真/画像を横並びにする。＋ <div>の横幅一杯に画像を並べてリサイザブルにする。

→→→　ブログ記事

サンプル１

「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/160/001.jpg">
	<img src="img/160/002.jpg">
	<img src="img/160/003.jpg">
	<img src="img/160/004.jpg">
	<img src="img/160/005.jpg">
</div>

サンプル２

<div>の横幅一杯に画像を並べて表示し、ブラウザウィンドウのリサイズに合わせて画像がリサイズするようにする。<img>それぞれを<div>で囲み、<img>に「max-width:100%;」を指定。（画像はサイズの大き目のものを使用。）

<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/800/001.jpg"></div>
	<div><img src="img/800/002.jpg"></div>
	<div><img src="img/800/003.jpg"></div>
	<div><img src="img/800/004.jpg"></div>
	<div><img src="img/800/005.jpg"></div>
</div>

サンプル３

サンプル２の各画像にマージンを付けた。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
.box-item {
	margin-right: 10px;
}
.box-row img {
	max-width: 100%;
}
</style>
<div class="box-row">
	<div class="box-item"><img src="img/800/001.jpg"></div>
	<div class="box-item"><img src="img/800/002.jpg"></div>
	<div class="box-item"><img src="img/800/003.jpg"></div>
	<div class="box-item"><img src="img/800/004.jpg"></div>
	<div class="box-item"><img src="img/800/005.jpg"></div>
</div>

画像の個数に関係なく、<div>の横幅一杯に画像が並ぶ。

<div class="box-row">
	<div class="box-item"><img src="img/800/001.jpg"></div>
	<div class="box-item"><img src="img/800/002.jpg"></div>
	<div class="box-item"><img src="img/800/003.jpg"></div>
	<div class="box-item"><img src="img/800/004.jpg"></div>
</div>

<div class="box-row">
	<div class="box-item"><img src="img/800/001.jpg"></div>
	<div class="box-item"><img src="img/800/002.jpg"></div>
	<div class="box-item"><img src="img/800/003.jpg"></div>
</div>