CSS3フレキシブルボックスモデルの開発手法の一つ-CSSチュートリアル-php.cn

この記事は主に CSS3 フレキシブルボックスモデルの開発ノートを皆さんと共有し、互換性やさまざまな属性を紹介します。興味のある方は

フレキシブルボックスモデル (フレキシブルボックスモジュール) を参照してください。このモデルは、要素が内部でどのように分散されるかを決定するために使用されます。ボックスとボックス内の利用可能なスペースを処理します。これは XUL (Firefox ブラウザのユーザーインタラクション言語) に似ており、他の言語も同じボックスモデルを使用します。 XAML、GladeXML など。フレックスボックスモデルを使用すると、ブラウザウィンドウに適応する流動的なレイアウトや、フォントサイズに適応するフレックスレイアウトを簡単に作成できます。

互換性: フレックスボックスモデル仕様は、2009 年に W3C 標準化組織によってリリースされました。現在、これをサポートしている主流ブラウザはありませんが、Webkit および Mozilla レンダリングエンジンを使用するブラウザは、設定をサポートするために使用されるプライベートプロパティのセットをカスタマイズしています。フレックスボックスモデル。

Webkit レンダリングエンジンを使用するブラウザには、主に Safari ブラウザと Chrome ブラウザが含まれます。このエンジンは、-webkit という接頭辞が付いたプライベート属性をサポートします。

Mozilla レンダリングエンジンを搭載したブラウザには主に、-moz というプレフィックスが付いたプライベート属性をサポートする Firefox ブラウザが含まれます。

関連属性:

box-align: ボックスの垂直方向の子要素のスペース割り当て方法を定義します
box-direction: ボックスの表示順序を定義します
box-flex: 子要素の適応サイズを定義しますボックス内
box -flex-group: 適応サブ要素グループを定義
box-lines: 列に表示されるサブ要素を定義
box-ordinal-group: ボックス内のサブ要素の表示位置を定義
box -orient: ボックス分割の座標を定義します Axis
box-pack: ボックス内の子要素の水平方向のスペース割り当て方法を定義します

box-orient 属性

この属性は、内部のフローのレイアウト方向を定義するために使用できますbox 要素。フレキシブルボックスモデルを使用する場合、最初に親コンテナの表示属性を box または inline-box に設定する必要があります。
構文：

box-orient：horizontal | vertail | inline-axis |inherit

値の簡単な説明：

horizontal：box要素は、その子要素を左から右に水平線に表示します。

vertail: box 要素は、その子要素を上から下に垂直線で表示します。

inline-axis: ボックス要素は、その子要素をインライン軸に沿って表示します。

block-axis: ボックス要素は、ブロック軸に沿ってその子要素を表示します。

実践経験: 複数列レイアウトの設計

html コード:

<p id="box">  
    <p id="box0"><img src="images/web_01.gif" /></p>  
    <p id="sub-box">  
        <p id="box1"><img src="images/web_02.gif" /></p>  
        <p id="box2"><img src="images/web_03.gif" /></p>  
        <p id="box3"><img src="images/web_04.gif" /></p>  
    </p>  
</p>

ログイン後にコピー

CSS3 コード:

<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:#170843;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>

ログイン後にコピー

デモ効果:

box-direction 属性

box-direction 属性は、内部要素を変更できますbox 要素フロー順序、この属性の基本構文:

box-direction:normal | reverse |inherit

値の簡単な説明:

normal: 通常の表示順序、つまり box-origent 属性の場合box 要素の値が水平の場合、含まれるサブ要素は左から右の順に表示されます。つまり、各サブ要素の左側は常に前のサブ要素の右側に近くなります。 box要素のbox-origent属性値がverticalに設定されている場合、それに含まれるサブ要素が左から右の順に表示されます。上から下の順に表示されます。

reverse: 表示を反転し、ボックスに含まれるサブ要素の表示順序が通常とは逆になります。

inherit: 上位要素の表示順序を継承します。

実践経験: 逆レイアウト Web ページ (上記のケースに基づく):

CSS3 コード:

<style>   
body{   
    margin:0;padding:0px;   
    text-align:center;   
    background:#170843;   
}   
#box{   
    margin:auto;   
    text-align:center;   
    width:975px;   
}   
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
    box-direction:reverse;   
    -moz-box-direction:reverse;   
    -webkit-box-direction:reverse;   
}   
</style>

ログイン後にコピー

デモ効果:

box-ordinal-group 属性

box-direction 属性は次のとおりです。ボックス内の要素のフロー順序が変更され、box-ordinal-group 属性はボックス内の各サブ要素の特定の表示位置を設定できます。構文は次のとおりです:

box-ordinal-group:

値の説明:

属性値は、子要素の位置記号を設定するために使用される 1 から始まる自然数です。子要素の分布は、この属性値に従って小さいものから大きいものへと配置されます。デフォルトでは、子要素は要素の位置に基づいて配置されます。
注: box-ordinal-group 属性値が指定された子要素がない場合、そのシーケンス番号はデフォルトで 1 になり、同じシーケンス番号を持つ要素はドキュメントにロードされた順序で配置されます。

実践体験: 縦型 Web レイアウト

HTML コード:

<p id="box">  
    <p id="box1"><img src="images/web1_01.gif" /></p>  
    <p id="box2"><img src="images/web1_02.gif" /></p>  
    <p id="box3"><img src="images/web1_03.gif" /></p>  
    <p id="box4"><img src="images/web1_04.gif" /></p>  
</p>

ログイン後にコピー

CSS3 コード:

<style type="text/css">   
body {   
    margin:0;   
    padding:0;   
    text-align:center;   
    background:#d9bfe8;   
}   
#box {   
    margin:auto;   
    text-align:left;   
    width:988px;   
}   
/*定义盒形显示及盒内元素垂直显示*/  
#box {   
    display : -moz-box;   
    display : -webkit-box;   
    display : box;   
    box-orient:vertical;   
    -moz-box-orient:vertical;   
    -webkit-box-orient:vertical;   
}   
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  
#box1 {/*设置第一个元素显示在第二个位置*/  
    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
    box-ordinal-group : 2;/*标准用法*/  
}   
#box2 {/*设置第二个元素显示在第三个位置*/  
    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
    box-ordinal-group : 3;/*标准用法*/  
}   
#box3 {/*设置第三个元素显示在第一个位置*/  
    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
    box-ordinal-group : 1;/*标准用法*/  
}   
#box4 {/*设置第四个元素显示在第四个位置*/  
    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
    box-ordinal-group : 4;/*标准用法*/  
}   
</style>

ログイン後にコピー

デモ効果