flex と inline-block の使い方

8月に入り日にちが経ちますが、まだまだ暑さが続いてますね。

さらに水分を補給しながら、体調管理には気を付けてください。

8月のイメージといえば、戦争しか連想できません…

広島原爆・長崎原爆・終戦記念日…

日本の行事といえば、夏祭りしかイメージがわかないですね。

有意義な夏の時間を思いきり楽しんでますか？

さてと、話題を取り戻して…

flex と inline-block の使い方

最近は、「display:flex」というCSSを使うレイアウトデザインを見かけますね。

昔はほとんど、「display:inline-block」を使ってセンタリングを設定していました。

ただ、レイアウトに使う内容によって変わっていきます。

親要素の横幅サイズが1200pxで、親要素の中に横を3列で9個のボックスを入れたいとき。

<ul>
	<li>
		<div>
			<img src="./img/photo01.jpg" alt="Photo01" width="100%" />
		</div>

		<h2>写真名</h2>

		<p>写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。</p>
	</li>

	<li>
		<div>
			<img src="./img/photo02.jpg" alt="Photo02" width="100%" />
		</div>

		<h2>写真名</h2>

		<p>写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。</p>
	</li>

	<li>
		<div>
			<img src="./img/photo03.jpg" alt="Photo03" width="100%" />
		</div>

		<h2>写真名</h2>

		<p>写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。写真の説明のテキストが入ります。</p>
	</li>

	～以下中略～
</ul>

「display:flex」を使うとき

ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
}

～以下、好みに合わせてコーディング～

ul li {
	border: 1px solid #999;
	margin: 10px;
	padding: 9px;
	width: calc( 100% / 3 - 40px );
}

これで、横幅が1200pxに対して、横に3列を並べることができました。

参考画像

「display:inline-block」を使うとき

ul {
	display: block;
	margin: 0 auto;
	padding: 0;
}

～以下、好みに合わせてコーディング～

ul li {
	border: 1px solid #999;
	display: inline-block;
	margin: 10px;
	padding: 9px;
	width: calc( 100% / 3 - 44px );
}

同じく、display:flexを並べることができましたが、横幅サイズが変わってきてます。

参考画像