両サイドを縁に揃えて等間隔に要素を配置する便利なcss

京都の鴨川と言えば、カッポーが等間隔にならんでいるのが印象的ですね。この光景を初めて見た時に思いました。
俺の方がもっと綺麗に等間隔に並べられる！と。

今回は両サイドを縁に揃えてその間を等間隔で要素を配置するcssを紹介します！
これが超便利！

いちいちmarginをいじったりとか、あれをいじったりこれをいじたりゴチャゴチャとコードをいじらなくて済みますよ！

超簡単に等間隔表示

等間隔に配置するデモ

ちゃんと等間隔になってますね。cssはちょっとだけしか書かなくてもこのように等間隔で配置できます。このレイアウトはフレキシブルボックスレイアウトといいます。

html

htmlはこんな感じ。
非常にシンプルなコードですね。

<div class="top-navi-wrapp">
	<div style="width:37px;">要素1</div>
	<div style="width:37px;">要素2</div>
	<div style="width:37px;">要素3</div>
</div>

css

cssはたったこれだけ！
3・4行書いちゃえば等間隔で配置できます！

.top-navi-wrapp{
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-between;
	height:92px;
}

flexに対応しているブラウザがまだ少ないみたいですが、超便利ですね。
このdisplay:flexを使ったレイアウト（フレキシブルボックスレイアウト）は
display: box→display: flex-box→display: flex;と変わっていて今後も変わる可能性があるのでちょっと注意が必要です。

ちなみに、ここのサイトが非常に参考になりました。