ホームページ > 記事 > ウェブフロントエンド > ボックスの配置位置のbox-ordinal-group属性の詳細説明
ボックスの配置位置のbox-ordinal-group属性の詳細説明
- 云罗郡主転載
- 2018-10-23 15:39:093207ブラウズ
この記事では、ボックスのレイアウト位置の 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 サイトの他の関連記事を参照してください。