Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

数は少ないですが、今後増えるの期待しつつ覚えておきたかったので備忘録。「Flexbox Patterns」はタブ・フッター・リストなどサイトでよく使われるレイアウトやパーツを、CSSのFlexboxを使った実装例としてまとめているサイトです。Flexboxが便利なのはわかるけど具体的にどんなところに使うのかまだピンとこない人や勉強したい人には便利そうです。

Flexbox Patterns

現時点で以下のような10パターンがまとめられており、タブ・ヘッダー・リスト・カードレイアウトなどサイト制作時によく利用するというものが多く、それぞれHTMLやCSSとともに実際の見栄えを確認することもできます。

  • Stepper input
  • Tabs
  • Site header
  • Form footer
  • Side bar
  • Centered prompt
  • Centered icon
  • Feature list
  • Card
  • Card group

Flexboxの具体的な使い方やどのプロパティでどのような動きになるのかがまだピンとこないという場合は、人によってはこういったものを利用してみるとすんなり覚えられたりもするので一度見てみると良いかもしれません。


ちなみに以下では同じくFlexboxについて勉強・理解を深めたいという人に参考になるエントリーやサイトをまとめているので、興味ある方はこちらも併せてご覧ください。

Close the search window,
please press close button or esc key.