我有一组元素,当页面是特定宽度(320px)时,我想切换显示顺序.他们确实改变了秩序,但我无法弄清楚为什么这些元素是“浮动的”,而不是堆叠. (“浮动”是引号,因为我知道它实际上并不浮
我有以下HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* Elements */
html, body, div, form, fieldset, legend, label{
margin: 0;
padding: 0;
}
body{ margin:0; padding:0; line-height:1; font-family:Arial, Helvetica, sans-serif; }
table{
border-collapse: collapse;
border-spacing: 0;
}
th, td{
text-align: left;
vertical-align: top;
}
ul, li{padding: 0; margin:0;}
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; margin: 0 0 16px; }
img { border: 0; }
p{ margin: 0 0 16px; }
a{}
/* Forms */
fieldset{ border:none; }
input:focus, select:focus, textarea:focus{ outline: 1px solid #ccc; }
textarea{ overflow: auto; }
/* Utility */
.error{color: #f00; }
.left{float: left; }
.right{float: right; }
.clear{clear: both; }
.hide{display: none; }
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
nav{
background: #f00;
}
nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav ul li{
list-style: none;
margin: 0 auto;
text-align: center;
float: left;
}
@media screen and (max-width: 320px){
nav{max-width: 100%;}
nav ul {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
nav ul li{
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
float: none;
}
nav .home{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
nav .projects, nav .services{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
nav .about, nav .contact{
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class="projects">Projects</li>
<li class="services">Services</li>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
并测试fiddle.
任何人都可以告诉我为什么flex-box父级内部的元素彼此相邻,而不是堆叠？谢谢您的帮助！
弄清楚了.未将列的flex-direction属性指定给flex-box容器.更新了fiddle.