機能クエリとフレックスボックス終わりにフレックスボックスは最新のブラウザーではきちんと対応されていますが、いくつか問題があります。このガイドでは、フレックスボックスのブラウザーでの対応状況を見て、潜在的な問題やリソースや、回避策や代替品を作成する方法について紹介します。仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダープレフィックスが使われました。このようなプレフィックスは、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。年の仕様は、今とはだいぶ異なります。プロパティによってフレックスボックスの機能を実現していました。変わり、またベンダープレフィックスつきへと変わりました。指定するという仕様に変わりました。仕様が固まってからは、最新の仕様へのブラウザーの対応は良好です。古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナの指定方法の違いで簡単に見分けられます。ブラウザーの状況フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダープレフィックスは不要です。対応したことで、有名なブラウザーはすべてプレフィックス不要となりました。つのブラウザーにはまだ注意すべきです。プレフィックスが必要です。プレフィックスが必要です。仕様に対応していますが、その実装に多くのバグがあることにも注意してください。ある問題フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。サイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。通常の指定に加えて、ベンダープレフィックスつきの指定を使ってください。フレックスボックスへの対応が広がっている現在、プレフィックスが必要な場面はどんどん少なくなっていますが。どの世代のブラウザーまで対応したいかに応じて必要なプレフィックスを示してくれるので便利です。ブラウザーでプレフィックスが削除された時期を調べることができます。プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。フレックスアイテムの浮動やその解除を行いません。これでアイテムはフレックスアイテムとなります。両者は同じ高さに引き伸ばされます。効果は一切現れません。効果が現れなくなります。削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。指定した要素の挙動と同じです。テーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。ような古いブラウザーでも動作するからです。テーブルセルの性質を帯びることになります。種類の無名のボックスを作ります。要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。ツリー構造を補うためのものなのです。指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。テーブル関連の機能は失われます。値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。フレックスアイテムとなります。どちらにも指定できます。よる縦方向の整列は、フレックスボックスよりも先に行われます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。機能クエリとフレックスボックス下記のように、フレックスボックスに対応しているかどうかを機能クエリで検査できます。機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。フレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダープレフィックスが必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダープレフィックス付きの条件を追加する必要があることを忘れないでください。機能クエリとプレフィックス付きの古い構文に対応しています。終わりにこのガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーをサポートする必要がある場合に役立ちます。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。