Flexboxリーディングリスト：テクニックとツール

Flexboxを使用すると、レイアウトを新しい種類で制御できるため、CSSだけでは解決が困難または不可能だったコーディングの課題が簡単かつ直感的になります。 これにより、柔軟で動的コンテンツを認識するグリッドを構築する手段が提供されるため、レイアウトにハッキングするのではなく、作成プロセスに集中することができます。

Flexboxをすぐに使い始めて、一般的なコーディングの課題をマスターするためにFlexboxを使用する方法についてのアイデアを提供するために、今日すでにその能力を最大限に活用するのに役立つヒント、トリック、およびツールを集めました。 このリストは完全なものではありませんが、役立つと思われるリソースが含まれています。

SmashingMagの詳細：

• Flexboxを使用したレイアウトの設計
• CSSとFlexboxによる水平方向と垂直方向のセンタリング
• CSSとFlexboxを使用した数量クエリ
• ユーザーインターフェイスモジュール（ドロップダウン、スティッキーフッターなど）
• Webアプリ用のFlexboxモジュール

入門

今日Flexboxを使用する

Flexboxのパワーとその使用方法に関する優れた入門書は、ChrisWrightの記事「今日のFlexboxの使用」です。 クリスが指摘するように、私たちが今日構築するものと私たちが明日アプローチする方法との間には明確なギャップがあります。 そこで、今日より多くの人々にFlexboxを使用してもらうために、彼はプロジェクトにその価値を追加するための戦略を概説し、カードレイアウト、分割画面レイアウト、固定レイアウト、新聞、広告ユニットなど、Flexboxで現在のレイアウトを強化する方法の例を示します。複数列のレイアウトとダッシュボード。

Flexboxを楽しく学ぶ

正直なところ、その壮大な可能性にもかかわらず（またはそのために？）、Flexboxを始めようとしているのであれば、Flexboxは非常に気が遠くなる可能性があります。 そのプロパティと要素を把握する楽しい方法は、Flexbox Froggyです。これは、Flexboxを使用して小さなカエルをユリパッドに誘導することにより、Flexboxの基本を教えるブラウザゲームです。

実用的なヒントとコツ

Flexboxの基本に頭を悩ませて、さらに深く掘り下げる準備はできていますか？ 次のリソースは、一般的なコーディングの課題に対する実用的なソリューションを提供します。

Flexboxで解決

CSSハッカーが何年にもわたって解決しようとしてきたすべてのことを考えてみてください：聖杯レイアウト、全幅の流体入力ペア、オーバーフローなしで通過するメディアオブジェクト、クリアフィックスまたはブロックフォーマットハック、内容がまばらなページ、垂直方向の中央揃え—ええと、Flexboxはこれらすべてを、ハッキングなしでうまく解決します。 Philipp Waltonは、これらの課題とそのFlexboxソリューションのショーケースをまとめました。 次のプロジェクトのために手元に置いておくのは素晴らしいことです。

Finessedグリッドの作成

Flexboxの中心となるのは、動的コンテンツに耐性のあるラップ可能なグリッドを作成する機能です。 基本的なラッピング手法を使用して、子をグリッドに自動的に分散できるため、子の数に関係なく、適切なレイアウトに対応できます。 要素クエリは、子が最小幅に達するように拡張することでグリッドを完全に応答させるのに役立ちます。グリッド内の要素を再シャッフルする可能性により、グリッドが単一の要素行で終わらないことが保証されます。

Flexboxと数量のクエリ

Aaron Gustafsonは、Flexboxと数量のクエリを試し、視覚的に強化された柔軟なグリッドレイアウトを考案しました。 アーロンの場合、グリッドレイアウトが柔軟になり、彼の今後のスピーキングの外観の1つから2つが強調表示され、他のユーザーがデフォルトのグリッドサイズで流入できるようになります。 たとえば、ポートフォリオページや最近のブログ投稿にも最適です。

アラインメントシフトラッピング

次の問題を想像してみてください。メインタイトルとサブタイトルが同じ行にあります。 メインタイトルを左揃えにし、サブタイトルを右揃えにします。十分なスペースがない場合は、サブタイトルをメインタイトルの下に折り返す必要があります。

それがクリス・コイエが遭遇した状況です。 彼のアラインメントシフトラッピングテクニックは、タイトルにdisplay:flex; タイトル自体はflex-grow: 1; 、字幕が右に押されます。 また、フレックスコンテナはラップできるため、フレックスラップのみが必要flex-wrap: wrap; 小さな画面で字幕が意図したとおりに動作するようにします。 Flexboxが非常にシンプルなものを作るのに優れている瞬間の1つ。 他のレスポンシブデザインの課題にも適用できます。

justify-contentオーバーライド

Flexboxの最もよく守られている秘密の1つは、おそらく、 justify-contentをオーバーライドして、主軸に沿って独立してフレックスアイテムを配置する方法です。 解決策：自動マージン！ もちろん、CSSは初めてではありませんが、Flexboxと組み合わせると、まったく新しい機能が明らかになります。 フレックスアイテムに適用すると、アイテムは、自動マージンが適用される方向に応じて、指定されたマージンを自動的に拡張して、フレックスコンテナの余分なスペースを占有します。

Flexboxを使用したUIパターンの再想像

Flexboxの能力が一般的なレイアウトタスクを超えていることは、ZellLiewによる実験を示しています。 彼はFlexboxを使用して、どこにでもあるUIパターン、つまり星評価要素を再考しました。 彼のFlexboxバージョンは、SVGでわずか50行のコードと5つの星で処理され、兄弟セレクター~ 、 flex-flowプロパティ、およびrow-reverseの組み合わせを使用して実現されました。 気の利いた！

CJ CenizalによるFlexboxパターンは、Flexboxの機能を使用してUIコンポーネントを構築する方法も示しています。 インタラクティブな例と、ステッパー入力、タブ、フォームフッター、中央揃えのプロンプト、サイドバーなどを開始するために必要なソースコードを提供します。

ツールとその他のリソース

フレックスアイテムの幅の計算

フレックスアイテムの幅を計算するのが難しい場合は、Flexboxテスターが最適です。 3つのフレックスアイテムのflex-grow 、 flex-shrink 、 flex-basisの値を入力するだけで、それらがどのように動作するかを確認できます。

バグと回避策への対処

もちろん、他の手法と同様に、Flexboxにはバグがないわけではありません。 あなたが1つに遭遇したそれらの瞬間のために、Flexbugsは修正に応えるためにバインドされています。 Flexboxの問題のコミュニティが厳選したリストは、解決策とブラウザの回避策を提供するために定期的に更新されます。 まだリストされていないバグを発見した場合は、GitHubを介して報告できます。 ブラウザの回避策と言えば、Flexibilityポリフィルは、Flexboxをサポートしていない古いバージョンのInternetExplorerの修正を提供します。 ページ上のフレックスの影響を受ける要素を検出し、IE8および9でそれに応じてスタイルを変更します。

リストに追加するものがありますか？ 以下のコメントセクションで、お気に入りのFlexboxリソースについてお知らせください。