ボックスの配置位置のbox-ordinal-group属性の詳細説明-CSSチュートリアル-php.cn

ボックスの配置位置のbox-ordinal-group属性の詳細説明

云罗郡主

リリース： 2018-10-23 15:39:09

転載

3209 人が閲覧しました

この記事では、ボックスのレイアウト位置の 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属性の詳細説明