サイトを作成しない場合、誰がフレックスを必要としますか？
彼らは、12％のサイトが既にフレックスを使用しています。 そして、タイプセットをより便利にするために、それらすべてが必要です。
フレックス、またはフレキシブルボックスレイアウトは、2006年から使用されています。 11年が経ちました！ その後、Firefoxインターフェースを構築するためにMozillaに導入されました。 ブラウザパネルを設定していると想像してください。ボタンが端に散らばり、押し出して水平に立ちます。 本物のフレックスボックス。 2009年に、MozillaはこのシステムをCSSに追加することを提案しました。
それ以来、多くのことが起こりました。最初のflexは、SafariやWebKitの他のブラウザに登場しました。 2番目のバージョンは、2012年にIE 10で登場しました。 Flex-Wrap転送による現在の形式のFlexは、Firefox 28のリリースにより2014年に広くサポートされ始めました。現在、世界中のブラウザのほぼ98％が少なくとも一部のバージョンのflexboxをサポートしています。 Opera Miniでさえ、Prestoエンジンの最後の息づかいで柔軟性を学びました。
なぜ必要なのですか？ これは、ハックではない最初のCSSレイアウトシステムです。 テーブル、フロート、インラインブロックは、まったく異なるものを思いつきました。 3つの簡単な例を想像してください。 同じゴムの高さの柱：1つは内容が大きくなり、もう1つはそれを追うものです。 または、要素の数に関係なく、要素内の水平ブロックが均等に分散されます。 または、親の内部の任意のサイズのブロック-ちょうど中央。
私は知っています、私は知っています-これはすべて、十数通りの方法で模倣することができます。 CSSは非常に柔軟で、フロート、インラインブロック、テーブルプロパティに加えて、トリッキーな配置を使用できます。 彼は何年もそれを模倣し、ハッキングやトリックに手を出しました。 しかし、実際にはflexのみがそれを単純かつ明示的に行います。
.center { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); }
これは何ですか？ Flexはそのようなフォーマットコンテキストです。親表示を与えると、flexとその子は疑わしく動作し始めます。 また、古い表示もあります。ブロックがテーブルの内部になりすます場合のテーブルコンテキストと、まったく新しいものはグリッドであり、フレックスよりもさらにクールです。 グリッドとフレックスには共通点があり、非常に価値があります。
ゴムブロックを散布するだけでは不十分です。これはフロートでも可能です。 また、メイン軸に沿って開始する場所、親内の空のスペースを分割する方法、および軸を横切って整列する方法を言う必要があります-フレックスでは、方向を変更できます。 別のBox Alignment仕様がこれらの問題に対処しています。
.flex { display: flex; justify-content: space-between; align-items: stretch; flex-direction: column; }
フレックスとグリッドには、子供向けのBox Alignmentが含まれていますが、これは私たち全員が本当に見逃したものです。 いつか、正当化コンテンツ、自己整合、正当化アイテムなどのプロパティは、他のコンテキストで機能します。 確かに、最も人気のあるレイアウトの質問は、ブロックを垂直に配置する方法です。 これを行う最も簡単な方法は、フレックスです。
さて、フレックスは素晴らしいです、2つを与えます。 しかし、なぜ国の主要なスタジオは、国の主要な会社のサイトをリリースするのですか？ 信頼性のために、場合によってはテーブルの上でも。 2つのオプションがあります。IE9のサポートが必要な場合、またはハードコアの古い信者がそこで動作する場合です。 すべてがフロートで動作しますが、なぜ何かを変更するのですか？
保守的なタイプセッターはそのままにして、ブラウザのサポートに対処します。 古いAndroid 4.3、iOS 6またはFirefox 27が必要な場合、ハイフネーションなしで1行のみにフレックスがあります。フレックスラップはまだ機能しません。 同じ高さのカードの便利なリストを作成することは、連続して次々に転送されますが、機能しません。
古いWebKitと非常に古いFirefox 21は、プレフィックスが-webkitと-mozで、わずかに異なる構文で2009フレックスボックスバージョンをサポートします。 IE 10および11では、構文は既に最新のものに近く、ハイフネーションのサポートがありますが、-msプレフィックスの後ろにあります。 最新のフレックスを作成し、AutoPrefixerを使用してプレフィックスを配置すると、古いプロパティが追加され、すべてが正常に機能するようになります。 しかし、魔法はありません。転送は機能せず、バグはどこにも行きません。
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
バグについては、Firefox、Safari、およびIEにプレフィックスが付いている古い実装では、十分なバグがあります。 しかし、それらはすべて、フィリップウォルトンによるFlexbugsのコレクションで多少説明されています。 まず、サポートするブラウザーを決定する必要があります。おそらく、プレフィックス付きの古いflexの代わりに、floatを与えるだけですか？
はい、これは最も快適です。フロート上またはテーブルのコンテキストで単純なレイアウトを作成し、次にdisplay：flexを宣言して、フレックスできるブラウザでさらに良くすることができます。 サイトは、顧客が何を必要としても、すべてのブラウザで同じように見えるべきではありません。 特に古いものでは、主なタスクはアクセス可能なコンテンツを保存することです。
フロートは、テキストが写真の周りを流れると考え、レイアウトがどこかで泳ぐのをやめる時が来たと考えました。 アカデミーでは、 基本的および高度なレイアウト集中型のプログラムを既にフレックスに移行しています。お勧めします。 すでに可能です。