FlexboxパターンUltimate CSS Flexboxコードライブラリ

最新のCSS flexboxプロパティは、開発者がインターフェースを作成する方法を根本的に変えました。レイアウトを完璧に整列させるためのフロートやCSSハックはこれ以上ありません。複数列のレイアウトを処理するためのカスタムレスポンシブ手法について心配する必要はもうありません。.

しかし、flexboxが多くの問題を解決したとしても、学ぶのも複雑です。あなたが始めるのを助けるために1つの中央の場所に多くの異なったflexbox要素をカタログ化するFlexbox Patternsと呼ばれる新しいオンラインライブラリがあります.

このライブラリは完全に無料で使用でき、GitHub上でオープンソース化されています。すべての例は NPMからローカルにダウンロード または GitHubを通じて. しかし、必要に応じてコードをコピーして貼り付けるために、Webサイトで例を閲覧することもできます。.

各パターンには、簡単な説明とコードサンプルを含む独自のページがあります。あなたはかなり文字通りすることができます 既存のWebプロジェクトにコードをコピーして貼り付ける, 最初にコードが何をしているのか、そしてなぜそれを使っているのかについて少し学ぶことをお勧めします。.

たとえば、flexboxを使用して上部ナビゲーションバーのすべての要素を並べて配置するサイトヘッダーバーのデモを見てください。.

通常これはすべてをきちんと整列させるためにフロートとclearfixクラスを必要とするでしょう.

flexboxでは、次のものを使って1つのコンテナにすべてを保持できます。 ディスプレイ：フレックス 財産。このようにすることができます 要素がどのように相互作用するかを定義する お互いにそしてどのようにフレックスボックス 小さな画面で操作する必要があります.

パターンは常に更新されており、現在のライブラリはタブ、サイドバー、垂直/水平方向のセンタリングなどの最も一般的な要素に焦点を当てています。.

もしあなたがflexboxの初心者なら、間違いなくFlexbox Patternsをチェックしてください。このサイトはあなたにflexboxのすべての基本を教えるものではありませんが、それはあなたがあなた自身のWebプロジェクトのためにいじり回すことができる現実世界の例を提供します.