ホームページ  >  記事  >  ウェブフロントエンド  >  ボックスの配置位置のbox-ordinal-group属性の詳細説明

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

云罗郡主
云罗郡主転載
2018-10-23 15:39:093195ブラウズ

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

上記は、box-ordinal-group 属性の詳細な説明です。ボックスのレイアウト位置のすべてを紹介します。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がボックスの配置位置のbox-ordinal-group属性の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はlvyestudy.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。