Flexbox 13 カレンダー／ページネイションの作り方

Flexbox の基本的な使い方はだいたい分かったけれど。

せっかくなので、これを何かに活用できないか？考えてみた。

（WEBレイアウトなんて、それが仕事の人でもなければ、そうそうやるもんでもないですしね。。。）

タイル状に埋め尽くすように並べるのが得意なのが Flexbox なわけで。

しかし、意外とタイル上にならべる機会は多くはないが、一つみつけたのはカレンダー

前にも作ったけれど、これはテーブルで作られていた。

今度は試しに Flexbox で作ってみる。

平成30年 9月

日

月

火

水

木

金

土

ああ、やっぱり、こういうのはFlexboxのほうが楽ですね！

（とは言えテーブルで完成しているものを、わざわざFlexboxで作り直す必然性は何もないが。）

他には、ナビゲーションボタンやページネイションボタン(※)とかにも向いていますね。

※ページネイションとは、複数ページによくあるこんなのですね。
　　　↓↓↓

< 1 2 3 >

これ、Table や DIV で作ろうとすると意外と面倒でしたが、Flexbox を使うと簡単

ソースはこれだけで済みます。

<div class="親クラス名">
	<a href="url1">></a>
	<a href="url2">1</a>
	<a href="url3">2</a>
	<a href="url4">3</a>
	<a href="url5"><</a>
</div>

後は、スタイルシートでデザインを指定してやるだけ

#main 親クラス名{
	display:flex;
	justify-content:center;
	}
#main 親クラス名 a{
	display:block;
	border:solid 1px lightgray;
	margin:0 1px;
	text-align:center;
	width:35px;
	line-height:35px;
	text-decoration:none;
	}

< 10 11 12 13 14 15 16 >