× カタログ [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 では、スケーラブルなプロジェクトがブロック要素である必要があります
1 | <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モジュールの共通互換コードです
1 | .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;}
|
ログイン後にコピー