使用CSS3中屬性box-direction控制布局順序的方法是什么

發(fā)布時間：2020-08-31 14:33:59 來源：億速云閱讀：127 作者：小新欄目：web開發(fā)

這篇文章主要介紹使用CSS3中屬性box-direction控制布局順序的方法是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在CSS3彈性盒子模型中，我們可以使用box-direction屬性來設(shè)置彈性盒子內(nèi)部中“子元素”的排列順序。

語法：box-direction

說明：box-direction屬性取值如下：

normal 正向顯示（默認(rèn)值）

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; /*定義盒子元素內(nèi)的元素從左到右流動顯示*/
            -webkit-box-direction:reverse; /*定義盒子元素內(nèi)的元素反向顯示*/
        }
        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>

在瀏覽器預(yù)覽效果如下：

使用CSS3中屬性box-direction控制布局順序的方法是什么

以上是使用CSS3中屬性box-direction控制布局順序的方法是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

使用CSS3中屬性box-direction控制布局順序的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽