flexbox（CSS3）で、レスポンシブなブログ記事一覧にする方法。

CSS3の勉強ついでに使用してみたflexboxについて、備忘録を兼ねてサンプルとしてご紹介します。

※7/29 ソースコード、サンプルファイル修正

記事一覧が簡単にレスポンシブに。

当サイトの記事一覧（アーカイブ）や検索結果では、メインカラム部分にflexboxでのレイアウトを使用しています。実際に使ってみると分かりますが、簡単にレスポンシブなレイアウトを実現するには、flexboxがとても便利です。

※各ブラウザの対応状況も、使用に耐えうる環境が概ね整っています

レイアウト変更イメージ

display: block;

縦積みから…

display: flex;

ボックスの高さも揃います。

実際のレイアウトは以下でご確認ください。
アーカイブ
検索結果

htmlの記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="container">
<header>ヘッダー</header>

<div id="main">
<p class="category-title">カテゴリタイトル</p>
<article>記事1 - テキストテキストテキストテキスト</article>
<article>記事2 - テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事3 - テキストテキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事4 - テキストテキストテキストテキスト</article>
<article>記事5 - テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事6 - テキストテキスト</article>
<article>記事7 - テキストテキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事8 - テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事9 - テキストテキストテキストテキスト</article>
<article>記事10 - テキストテキストテキストテキストテキストテキストテキスト</article>
<article>記事11 - テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</article>
<p class="pagination">ページ送り</p>
</div>

<div id="side">
<p>サイドナビ</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
<li>リスト7</li>
</ul>
</div>

<footer>フッター</footer>
</div>

</body>
</html>

CSSの記述例

@charset "utf-8";

/* レイアウト指定 */
body {
	margin: 0;
	padding: 0;
}

header,
footer {
	padding: 1.5em;
	text-align: center;
	background-color: #ccc;
}

#container {
	width: 96%;
	padding: 2%;
	margin: 0 auto;
}

#main {
	width: 75%;
	float: left;
}
#side {
	width: 25%;
	float: right;
}

footer {
	clear: both;
}

/* フレックスコンテナ（メインカラム） */
#main {
	display: -webkit-flex; /* for Safari */
	display: -ms-flexbox; /* for IE10 */
	display: flex;
	
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;

	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* フレックスアイテム（投稿記事） */
article {
	-webkit-flex: 1 1 230px;
	-ms-flex: 1 1 230px;
	flex: 1 1 230px;

	min-width: 230px;
	margin: 0 10px 10px 0;
	padding: 10px;
	background: #fc9;
	border-radius: 3px;
}

/* 横並びのアイテム幅に変化をつける */
article:nth-of-type(1),
article:nth-of-type(5) {
	-webkit-flex: 100 1 230px;
	-ms-flex: 100 1 230px;
	flex: 100 1 230px;
}
article:nth-of-type(9) {
	-webkit-flex: 1 1 100%;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
}

/* 記事以外のアイテム幅を100%に */
.category-title,
.pagination {
	width: 100%;
}
.pagination {
	text-align: center;
}

/* 画面の小さなデバイスでは、ブロックレイアウトに */
@media only screen and (max-width: 768px) {
	#main {
		display: block;
	}
}
/* スマホではワンカラムに */
@media only screen and (max-width: 480px) {
	article {
		margin-right: 0;
	}
	#main,
	#side {
		width: 100%;
		float: none;
	}
}

IE10、Safari対応に必要な、ベンダープレフィックスもそのまま記載したため、少し長くなってしまいましたが、記述自体はとてもシンプルです。ただもっとスマートな書き方がある予感がすごいので、もしあれば教えてくださいませ。

サンプルファイルは以下にあります。
サンプルファイル

※min-widthとflex-basisを併記してるのは、多分あんまりイケてないです（片方だけの指定だと、ウィンドウを小さくしてもshrinkしきらずアイテムが最小幅にならず、かつbasisを0指定にするとSafariでwrapが効かず一列になる）

レスポンシブなモックアップ制作に！フリーなPSD素材・サービスまとめ。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧