CSS 旧バージョン flex と互換性_html/css_WEB-ITnose

× カタログ [1] 適用範囲 [2] 柔軟なプロジェクト [3] 柔軟な流れ方向 [4] 柔軟なフローラップ [5] スピンドルアライメント [6] 拡張性 [7] 表示順序 [8] フレックス対応

前の言葉

フレックスボックスモデルには、旧バージョン、ハイブリッドバージョン、新バージョンの 3 つのバージョンがあります。フレックス ボックス モデルが主要なブラウザ間で一貫して動作するようにするには、これら 3 つのバージョンのさまざまな使用方法をマスターする必要があります。 CSS フレキシブルボックスモデルを深く理解する flex の基本的な使い方を詳しく紹介しました この記事では旧バージョンの flex との違いや互換性のある記述方法を中心に紹介します

適用範囲

旧バージョンの flex とは、最初の flex バージョンとこのバージョンの flex は safari3.1 ～ 6 (主に Windows システムの safari ブラウザに)、ios3.2 ～ 6.1、android2.1 ～ 4.3 に適用されます。そして、すべて -webkit- プレフィックスを追加する必要があります

スケーリング プロジェクト

古いバージョンの flex では、スケーラブルなプロジェクトがブロック要素である必要があります

<span>    <span>项目一</span>    <span>项目二</span>    <span>项目三</span>    <span>项目四</span></span>

スケーリング フローの方向

古いバージョンの flex のフロー方向をスケーリングします。flex 項目の順序のみが変更され、配置は変更されません。したがって、伸縮流線の逆効果を実現するには、direction:rtl を使用することをお勧めします

伸縮流線ラッピング

古いバージョンの flex は伸縮流線ラッピングをサポートしていないため、ライン ラッピング操作を使用しないようにしてください他のバージョンの flex

スピンドル アライメント

古いバージョンの flex の主軸アライメント属性には拡散アライメント属性値がないため、他のバージョンの flex ではこの属性値を使用しないようにしてください。

スケーラビリティ

古いバージョンの flex のスケーラビリティには 1 つの値しかありません。これは、スケーラブルなアイテム自体のサイズ、つまり古いバージョンの -webkit-box- のサイズの拡大率または縮小率に基づいていることを意味します。 flex:1; は flex:auto の新しいバージョンと同等であるため、スケーラブルな項目自体のサイズに基づいていないスケーリングを実現したい場合は、スケーラブルな項目の幅を明示的に設定する必要があります。 to 0

[注意] 値は小数をサポートしますが、負の値は指定できません

表示順序

古いバージョンの flex の表示順序は、デフォルト値が 1 の正の整数ですが、新しいバージョンの flex は、デフォルト値が 0 の自然数です。そのため、表示順を設定する場合は、1を飛ばして2から設定してください

flex互換

以下は、flexモジュールの共通互換コードです

/*display*/.display_flex{    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;}.display_flex > *{    display: block;}.display_inline-flex{    display: -webkit-inline-box;    display: -ms-inline-flexbox;    display: -webkit-inline-flex;    display: inline-flex;    }.display_inline-flex > *{    display: block;}/*伸缩流方向*/.flex-direction_column{    -webkit-box-orient: vertical;    -ms-flex-direction: column;    -webkit-flex-direction: column;    flex-direction: column;}/*主轴对齐*/.justify-content_flex-center{    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;}.justify-content_flex-end{    -webkit-box-pack: end;    -ms-flex-pack: end;    -webkit-justify-content: flex-end;    justify-content: flex-end;}.justify-content_flex-justify{    -webkit-box-pack: justify;    -ms-flex-pack: justify;    -webkit-justify-content: space-between;    justify-content: space-between;}/*侧轴对齐*/.align-items_flex-start{    -webkit-box-align: start;    -ms-flex-align: start;    -webkit-align-items: flex-start;    align-items: flex-start;}.align-items_flex-end{    -webkit-box-align: end;    -ms-flex-align: end;    -webkit-align-items: flex-end;    align-items: flex-end;}.align-items_center{    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;}.align-items_baseline{    -webkit-box-align: baseline;    -ms-flex-align: baseline;    -webkit-align-items: baseline;    align-items: baseline;}/*伸缩性*/.flex_auto{    -webkit-box-flex: 1;    -ms-flex: auto;    -webkit-flex: auto;    flex: auto;}.flex_1{    width: 0;    -webkit-box-flex: 1;    -ms-flex: 1;    -webkit-flex: 1;    flex: 1;    }/*显示顺序*/.order_2{    -webkit-box-ordinal-group: 2;    -ms-flex-order: 2;    -webkit-order: 2;    order: 2;}.order_3{    -webkit-box-ordinal-group: 3;    -ms-flex-order: 3;    -webkit-order: 3;    order: 3;}