x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#main {8
width: 350px;9
height: 350px;10
border: 1px solid #c3c3c3;11
display: flex;12
flex-direction: row;13
}14
15
#main div {16
width: 50px;17
height: 50px;18
}19
</style>20
</head>21
<body>22
23
<div id="main">24
<div style="background-color:coral;">A</div>25
<div style="background-color:lightblue;">B</div>26
<div style="background-color:khaki;">C</div>27
<div style="background-color:pink;">D</div>28
<div style="background-color:lightgrey;">E</div>29
<div style="background-color:lightgreen;">F</div>30
</div>31
<p>点击“尝试一下”按钮设置 flexDirection 属性的值为 "column-reverse"。</p>32
<button onclick="myFunction()">尝试一下</button>33
<script>34
function myFunction() {35
document.getElementById("main").style.flexDirection = "column-reverse";36
}37
</script>38
<p><b>注意：</b>Internet Explorer 和 Safari 不支持 flexDirection 属性。</p>39
40
</body>41
</html>