第29章CSS 3弾性伸縮レイアウト[上]

6468 ワード

学習のポイント:
1.レイアウトの概要
2.旧バージョン

先生:李炎恢

本章では,HTML 5におけるCSS 3が提供する将来の応答型弾性伸縮レイアウトを実現するためのスキームを主に検討するが,ここでは初歩的な理解を行う.

一.レイアウトの概要
CSS 3は、Flexboxレイアウト、すなわち弾性伸縮レイアウトモデル(Flexible Box)という斬新なレイアウト方式を提供する.応答レイアウトをより効率的に実現するために使用されます.しかし、このレイアウト方式にはW 3 Cのドラフト段階があり、古いバージョン、新しいバージョン、ハイブリッド移行バージョンの3つの異なる符号化方式に分けられている.発展の中で、いろいろな変更があるかもしれませんが、ブラウザの互換性に問題があります.だから、この授業は初歩的な理解としていいです.
まず、古いバージョンのブラウザの互換性を見てみましょう.
Flexbox旧バージョンの互換性
ツールバーの
IE
Firefox
Chrome
Opera
Safari
プレフィックス付き
なし
4 ~ 25
4 ~ 31
15 ~ 18
5.17+
接頭辞なし
なし
なし
なし
なし
なし
以上のデータは、CSS 3マニュアルから抜粋しました.もちろん、教材や文章によって少し違います.しかし、誤差率も1～2バージョンで、影響は大きくありません.
まず、最初のステップ:まずコンテンツを作成し、3つの領域に分けます.
//HTMLセクション

<div>
    <p>
             ...
    </p>
    <p>
             ...
    </p>
    <p>
             ...
    </p>
</div>

//CSS部

p {
    width: 150px;
    border: 1px solid gray;
    margin: 5px;
    padding: 5px;
}

div {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

以上の設定により、IEブラウザの他に、レイアウトが水平に分散されます.では、これらの属性の意味を重点的に検討します.

二.旧バージョン
属性と属性の値が:display:boxの場合、2009年7月に設定された作業草案で、古いバージョンに属します.初期のブラウザのフレックスレイアウトスキームに向いています.
まず、レイアウトモジュールが必要ないくつかの親要素をコンテナプロパティdisplayに設定します.
属性値
説明
box
コンテナボックスモデルをブロックレベルの伸縮ボックスとして表示(旧バージョン)
inline-box
コンテナボックスモデルをインライン伸縮ボックスとして表示(旧バージョン)
ブロックレベルは

要素のように行全体を占有していることを知っています.一方、インラインレベルは行全体を占有せず、要素に似ている.しかし、私たちは箱全体を設置しました.彼らは占有せず、一致しています.
//弾力性を設定し、火狐を例に

div {
    display: -moz-box;
}

1.box-orientプロパティ
box-orientは主に箱の内部要素の流れ方向を実現する.
//垂直流れの設定

div {
    -webkit-box-orient: vertical;
}

属性値
説明
horizontal
伸縮アイテムを左から右に水平に並べます
vertical
伸縮アイテムを上下に垂直に並べます
inline-axis
伸縮項目をインライン軸に沿って並べて表示
block-axis
ブロック軸に沿った伸縮項目のリハーサル表示
2.box-direction
box-directionプロパティは、主に伸縮容器内の流れ順序を設定します.
//逆順設定

div {
    -moz-box-direction: reverse;
}

属性値
説明
normal
デフォルト、通常の順序
reverse
逆順序
3.box-pack
box-packプロパティは、伸縮プロジェクトの分布方法に使用されます.
//分布方式終了位置揃え

div {
    -moz-box-pack: end;
}

属性値
説明
start
伸縮項目を始点で揃える
end
伸縮項目を終了点で揃える
center
伸縮項目を中心点に揃える
justify
伸縮プロジェクトの引き分け分布、-webkit-サポート、-moz-サポートしていません
4.box-align
box-alignプロパティは、伸縮容器の余分なスペースを処理するために使用されます.//中央揃え、上下の余分なスペースのクリーンアップ

div {
    -moz-box-align: center;
}

属性値
説明
start
伸縮アイテムは上部を基準にして下部の余分なスペースをクリーンアップします
end
伸縮アイテムは下部を基準に上部の余分なスペースをクリーンアップします
center
伸縮項目は中部を基準として、上下部の余分なスペースを平均的に掃除します.
baseline
伸縮アイテムはベースラインを基準にして、余分なスペースをクリーンアップします.
stretch
コンテナ全体にわたって伸縮アイテムが塗りつぶされ、デフォルト
5.box-flex
box-flexプロパティ浮動小数点数を使用して伸縮項目の割合を割り当てる//伸縮項目ごとに占める割合を設定

p:nth-child(1) {
    -moz-box-flex: 1;
}

p:nth-child(2) {
    -moz-box-flex: 2.5;
}

p:nth-child(3) {
    -moz-box-flex: 1;
}

6.box-ordinal-group
box-ordinal-groupプロパティでは、伸縮項目の表示位置を設定できます.
//最初の位置の要素を、3番目の位置にジャンプ

p:nth-child(1) {
    -moz-box-ordinal-group: 3;
}

おしゃべりFile API

Githubのウェブサイトを開けて反応するのが遅い問題