CSS3 の box-direction 属性を使用してレイアウトの順序を制御するにはどうすればよいですか? (コードチュートリアル)-CSSチュートリアル-php.cn

CSS3 の box-direction 属性を使用してレイアウトの順序を制御するにはどうすればよいですか? (コードチュートリアル)

云罗郡主

リリース： 2018-10-23 15:47:57

転載

2225 人が閲覧しました

この記事の内容は、CSS3 の box-direction 属性を使用してレイアウトの順序を制御する方法についてです。 (コードチュートリアル) は、必要な友人に参考にしていただけると幸いです。

CSS3 フレキシブルボックスモデルでは、box-direction 属性を使用して、フレキシブルボックス内の「子要素」の順序を設定できます。

構文: box-direction

説明: box-direction 属性の値は次のとおりです:

通常順方向表示 (デフォルト値)

reverse reverse 表示

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-direction属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
            -webkit-box-direction:reverse; /*定义盒子元素内的元素反向显示*/
        }
        div{height:100px;line-height:100px;}
        #box1{background:red;}
        #box2{background:blue;}
        #box3{background:yellow;}
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです。

CSS3 の box-direction 属性を使用してレイアウトの順序を制御するにはどうすればよいですか? (コードチュートリアル)