完全なモバイル互換性のあるフレックスボックス クラッシュ course_html/css_WEB-ITnose

フレックスボックスといえば古いものですが、2009年にW3Cが提案した新しいスケーラブルなCSSレイアウト手法です。フレックスボックスを利用すると、スケーラブルなページのレイアウトをより簡単かつ効率的に完成させることができます。

業界には古いものから新しいものまでさまざまな flexbox に関するチュートリアル記事が存在します。その理由は、flexbox を使用したいと思っているものの、各バージョンの書き込み仕様を区別できないためです。皆さんがいつも口にする「フレックスボックスの互換性が良くない」という言葉にも悩まされています。 そこで今日は、重要な投稿を要約し、投稿者がプロジェクトで使用したフレックスボックスを確認し、「互換性」を気にする必要のないフレックスボックスの最良の例についてお話します (この記事ではモバイルについてのみ説明しています)端子）。

パート 1 まず歴史について話しましょう:

2009 年の Flexbox 仕様の最初のバージョンでは、「display:box;」と記述していましたが、

中期には、 Flexbox の用語バージョン; 「display:flexbox;」と書きます

現在の仕様バージョンでは、「display:flex;」と定義します。フレックスボックスの仕様の策定は難しく、常に変化しています。

しかし、現在使用されている最新のドラフト バージョンは、今年 3 月 1 日に正式に W3C の勧告候補段階に入りました。つまり、フレックスボックスの最終版は、仕様が実装されようとしています。

Part2 バージョン VS 互換:

下の図に示すように、Opera mobile12 を除くすべての主要なモバイル ブラウザは古いバージョンの flexbox 構文をサポートしていますが、flex の Wrap 属性は含まれていません。 。

パート 3 すぐに使えるフレックスボックスの最良の例

(以下のコード スニペットはすべて、モバイル端末との完全な互換性のあるフレックスボックスの記述方法と、検証済みのフレックスボックスのリストに従っています)モデルは記事の最後にあります) まず、フレックスボックスのプロパティ システムを確認してみましょう。率直に言うと、私たちがよく言う「フレックスボックス」には、実際には「親要素」と「子要素」の 2 つの部分が含まれています。 「親要素」はフレックスボックスとして定義され、「親要素」の「サブ要素」には自由に伸縮する機能が与えられます。 魔法の能力を与えるコード スニペットは次のとおりです。

1. flex をプロンプト アイコンとして使用します

flex 親要素の "align-items" 属性は次のとおりです。ここで使用されます。 側面の軸に沿った要素の配置を指定します。 flex-start | space-around | 1 つの属性設定で上揃えを完了できます。または シンプルで便利な下揃えスイッチです。

【デモリンク】: http://jsfiddle.net/tikizzz/2zuthdap/

2. flex を使用してリスト要素を作成します

同様に、次のようにするだけです。柔軟な親要素 「align-items」属性を使用すると、柔軟なリスト要素を作成できます。以下の図に示すように、3 つの状態の変形には CSS ファイルを変更する必要はありません。必要に応じて DOM 構造を非表示にするだけで済みます。

ここで 1 つのヒントに注意してください。以下の例の左画像と右ボタンなどの固定幅のサブ要素の場合、「flex:1」機能を追加する必要はありません。彼らはそのままです。

[デモリンク]: https://jsfiddle.net/tikizzz/ztdfq5dw/

3. フレックスを使用してタブを作成します

均等に分割されたタブの作成は、flexbox の最も一般的な機能です。実装原理は、「親要素」と「子要素」に「display: flex」と「flex: 1」を割り当てるだけです。 "それぞれ。できます。子要素の幅は、コンテンツの長さに応じて変わりません。以下の図に示すように、フロントエンドの生徒がタブの数を増減する場合、スタイルを変更せずに DOM 構造を増減するだけで済みます。

★主な互換性のヒント: 古いバージョンの仕様では、比例拡大縮小レイアウトを使用する場合、サブ要素のコンテンツの長さが異なるため、比例拡大縮小レイアウトを使用できなくなります。このとき、サブ要素に「width:0%」を設定する必要があります。この問題は解決されます。 ★重要な互換性のヒント: フレックスボックスの子要素に「margin:auto」属性を設定しないでください。一部の Android マシンでは、要素の幅がスペースの 100% に拡張されます

【デモリンク】: https://jsfiddle.net/tikizzz/ztdfq5dw/

4. ナビゲーションに flex を使用し (3 項目のレイアウトにのみ適しています)、align-items 属性も使用します, フレックスボックスのナビゲーション制作が簡単に完了できます。

ただし、ナビゲーションがシングルボタンレイアウトになると、タイトルバーが移動するため、特にお勧めしません。

[デモリンク]: https://jsfiddle.net/tikizzz/g2Lj417p/

5. flex を使用して、align-items 属性を使用して検索バーを作成します、また、フレックスボックス検索バーを簡単に作成することもできます。

[デモリンク]: https://jsfiddle.net/tikizzz/yut2qv9b/

6. 垂直方向のセンタリングにフレックスを使用します (単一/複数)

上記の 5 つの例では、実際にはフレックスボックスの基本プロパティと「align-items」プロパティのみを使用しています。これで終わったと思わないでください。Flexbox を使ってできることはまだあります。たとえば、「垂直方向のセンタリング」は常に私たちを悩ませてきました。flexbox を使用すると、画面上で幅と高さが可変の無制限の要素の「水平 + 垂直方向のセンタリング」を簡単に実現できます。

この部分は flexbox の別の属性を使用します。主軸に沿った要素の配置を指定します。 flex-start | space-around | 「軸交差配置方法」を中央に設定すると、子要素がどのような形状であっても、いつでもどこでも「水平方向と垂直方向の中央揃え」が可能です。

[デモリンク]: https://jsfiddle.net/tikizzz/zq8cdkfg/

7. flex を使用して垂直方向の伸縮性のあるレイアウトを作成します

上部の列、下部の列は固定されており、中央の要素はスクロール バーをサポートしています。これは、「垂直フレキシブル レイアウト」としておなじみのモバイル端末のページ構造モデルです。従来の flxed 書き込み方法を使用すると、一部の Android マシンには避けられない迷惑なバグが常に発生します。実際、フレックスボックスの変換方向属性をうまく利用すれば、この構造モデルを簡単に実装できます。下の図に示すように、実際には垂直方向の弾性膨張モデルを反転した水平方向の弾性膨張モデルです。

この部分は flexbox の方向属性を使用します。主軸の拡張フローの方向を指定します。 flex-direction: row column; ここで、box-orient に注意してください。 , Box-direction は、flex-box コントロールの方向の 2 つの古いバージョンであり、互換性を確保するには、両方を完全に記述する必要があります。

【デモリンク】: https://jsfiddle.net/tikizzz/obLp1mga/

最後に、完全なデモコレクションが含まれています: http://115.159 。 36.96/tikizheng/flextest/demo.html

Part4 その他

上記のデモがモバイル端末を開発する友人の役に立てば幸いです。もちろん、フレックスボックスにはオーダーやラップなどの優れた属性もありますが、現時点ではすべてのモバイル システムと互換性があるわけではありません。x5 カーネルは、フレックスボックスのすべての属性と完全に互換性があると述べたところです。フレックスボックスの今後にご期待ください。 さらに、

テスト済みモデル

が付属しています。 > 1. 上記のモデルは、Umeng、Yongyongbao、WeChat、Tencent Cloud からの運用活動データの統計的統合に基づく上位 7 モデルです。

2.上位 8 ～ 10 位の Huawei、Oppo、Meizu モデルは各ブランドの最も高い割合で選択されており、ブランド差別化テストのために存在します。

3. 黄色でマークされた解像度は、人気の上位 6 つの解像度であり、iOS 市場の 87% 以上、Android 市場の 50% 以上を占めています (Android には解像度が多すぎて、残りの 50% が占めています)。分解能が均等に分散されているため、当面は必要な測定範囲には含まれません）。

4.iOS8.0 以降と Android4.0 以降はモバイル システムの 90% をカバーし、そのうち iOS9.0 以降は 65% 以上を占め、Android4.4 以降は 60% 以上を占めます。各モデルのシステムのすべてのバージョンをカバーすることが必須です。古いバージョンのバグの数が 3 つを超える場合、それは必須テスト問題のあるバージョンとして設定されます。

タグ: css3、flexbox、h5 レイアウト