数は少ないですが、今後増えるの期待しつつ覚えておきたかったので備忘録。「Flexbox Patterns」はタブ・フッター・リストなどサイトでよく使われるレイアウトやパーツを、CSSのFlexboxを使った実装例としてまとめているサイトです。Flexboxが便利なのはわかるけど具体的にどんなところに使うのかまだピンとこない人や勉強したい人には便利そうです。
現時点で以下のような10パターンがまとめられており、タブ・ヘッダー・リスト・カードレイアウトなどサイト制作時によく利用するというものが多く、それぞれHTMLやCSSとともに実際の見栄えを確認することもできます。
- Stepper input
- Tabs
- Site header
- Form footer
- Side bar
- Centered prompt
- Centered icon
- Feature list
- Card
- Card group
Flexboxの具体的な使い方やどのプロパティでどのような動きになるのかがまだピンとこないという場合は、人によってはこういったものを利用してみるとすんなり覚えられたりもするので一度見てみると良いかもしれません。
ちなみに以下では同じくFlexboxについて勉強・理解を深めたいという人に参考になるエントリーやサイトをまとめているので、興味ある方はこちらも併せてご覧ください。