如何使用CSS3中屬性box-direction控制佈局順序？ （程式碼教程）
Oct 23, 2018 pm 03:47 PM本篇文章帶給大家的內容是關於如何使用CSS3中屬性box-direction控制佈局順序？ （程式碼教學），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在CSS3彈性盒子模型中，我們可以使用box-direction屬性來設定彈性盒子內部中「子元素」的排列順序。
語法：box-direction
說明：box-direction屬性取值如下：
normal 正向顯示（預設值）
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控制佈局順序？ （程式碼教程）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
