Flexboxの使用パターンを集めたサイト「Flexbox Patterns」!

2016/05/30

こんにちは。
今回はFlexboxの使用パターンを集めたサイト「Flexbox Patterns」!です。

タブ、メニュー、リストなどのよく利用するUIのFlexboxを使った実装例をまとめたサイトを紹介します。

Flexboxの使用パターンを集めたサイト「Flexbox Patterns」!

Flexbox Patterns

flexbox-patterns

http://www.flexboxpatterns.com/home

 

「Flexbox Patterns」の使い方

flexbox-patterns2

Stepper input、Tabs、Site header、Form footer、Side bar、Centered prompt、Centered icon、Feature list、Card、Card groupの10種類の実装例が用意されています。

 

flexbox-patterns3

Tabsの詳細画面はこんな感じです。
コードとその解説が紹介されていますよ。

 

いかがでしたか。Flexboxを使う際に参考になりますね。
以上でFlexboxの使用パターンを集めたサイト「Flexbox Patterns」!でした。

topへ戻る