第 29 章 CSS3 Elastic Sc​​aling レイアウト [パート 2]_html/css_WEB-ITnose

）

1.ハイブリッド移行バージョン

Flexbox モデルのハイブリッド バージョンは、2011 年に提案されたワーキング ドラフトです。主に、IE10 ブラウザーによって実装される伸縮レイアウト効果を目的としています。その機能は、古いバージョンのプロパティに似ています。前回のレッスンのファイルを引き続き使用し、混合遷移コードを使用して IE10 のスケーラブルなレイアウトを実装します。 まず、次の 2 つの属性値を使用してフレックス ボックスの表示を設定します:

属性値 flexboxinline-flexbox

div {    display: -ms-flexbox;}

説明
ブロックとしてのコンテナボックスモデルレベル フレキシブル ボックス表示 (ハイブリッド バージョン)
コンテナ ボックス モデルをインライン レベルのエラスティック ボックスとして表示します (ハイブリッド バージョン)	//IE プレフィックス -ms- が必要です

1.flex-direction

flex-direction プロパティは、フレックス項目の配置を設定する古いバージョンの box-orient プロパティと同じです。 //設定は上から下に配置されています

div {    -ms-flex-direction: column;}

Attribute value行row-reversecolumn列反転 2.flex-wrap

Description
左から右に並べられた設定
右から左に配置するように設定します
上から下に配置するように設定します
設定下から上への配置

flex-wrap 属性は古いバージョンの box-lines に似ていますが、サポートしているブラウザがないため box-lines については説明しませんでした。 。

//設定に収まらない場合は自動行折り返し

div {    -ms-flex-wrap: wrap;}

属性値nowrap wrapwrap-reverse3.flex-flow

説明
デフォルト値、すべて表示されます1 つの行または列
フレックス項目を収容できない場合に自動的にラップ
フレックス項目を収容できない場合、方向は反対ですWrap

flex-flowプロパティとは、配置方向と行の折り返し制御を組み合わせた略称です。 //短縮形

div {    -ms-flex-flow: row wrap;}

4.flex-pack

flex-pack プロパティは、古いバージョンの box-pack と同じで、flex 項目を配置する方法を設定します。 //中心点に従って整列します

div {    -ms-flex-pack: center;}

属性値 startendcenter正当化

説明

伸縮アイテムが開始点に位置合わせされます

伸縮アイテムは終点に揃えられます

伸縮アイテムは中心点に揃えられます

伸縮プロジェクトの連動配信

 5.flex-align

flex-align 属性和旧版本中的 box-align 一样，处理伸缩项目容器的额外空间。

//处理额外空间 

div {    -ms-flex-align: center;}

属性值	说明
start	伸缩项目以顶部为基准，清理下部额外空间
end	伸缩项目以底部为基准，清理上部额外空间
center	伸缩项目以中部为基准，平均清理上下部额外空间
baseline	伸缩项目以基线为基准，清理额外的空间
stretch	伸缩项目填充整个容器，默认

6.flex

flex 属性和旧版本中的 box-flex 类似，用来控制伸缩容器的比例分配。

//设置比例分配

p:nth-child(1) {    -ms-flex: 1;}p:nth-child(2) {    -ms-flex: 3;}p:nth-child(3) {    -ms-flex: 1;}

7.flex-order

flex-order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

//设置伸缩项目顺序

p:nth-child(1) {    -ms-flex-order: 2;}p:nth-child(2) {    -ms-flex-order: 3;}p:nth-child(3) {    -ms-flex-order: 1;}