ホームページ > 記事 > ウェブフロントエンド > ボックスの配置位置のbox-ordinal-group属性の詳細説明
この記事では、ボックスのレイアウト位置の box-ordinal-group 属性について詳しく説明します。必要な方は参考にしていただければ幸いです。
box-direction 属性でフレキシブル ボックス内の「子要素」の順序を設定できることがわかりました。 CSS3 フレキシブル ボックス モデルでは、box-ordinal-group 属性を使用して、フレキシブル ボックス内の各「子要素」の「正確な」表示位置を設定することもできます。
box-ordinal-group 属性の値は 1 から始まる自然数で、子要素の位置番号を設定するために使用されます。子要素の分布は、この属性値に従って小さいものから大きいものへと配置されます。デフォルトでは、子要素は要素の位置に基づいて配置されます。
box-ordinal-group 属性値を指定しないサブ要素の場合、サブ要素のシリアル番号はデフォルトで 1 になることに注意してください。また、同じシリアル番号を持つ子要素は、HTML ドキュメントに読み込まれた順序で配置されます。
まず例を見てから、これらの知識ポイントを確認しましょう:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 box-ordinal-group属性</title> <style type="text/css"> body { display:-webkit-box; -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/ } div{height:100px;line-height:100px;} #box1 { background:red; -webkit-box-ordinal-group:2; } #box2 { background:blue; -webkit-box-ordinal-group:3; } #box3 { background:yellow; -webkit-box-ordinal-group:1; } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> <div id="box3">盒子3</div> </body> </html>
上記は、box-ordinal-group 属性の詳細な説明です。ボックスのレイアウト位置のすべてを紹介します。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がボックスの配置位置のbox-ordinal-group属性の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。