3

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>

和一个测试小提琴。

谁能告诉我为什么 flex-box 父级中的元素彼此相邻浮动，而不是堆叠？谢谢您的帮助！

4

2 回答 2

4

弄清楚了。没有为 flex-box 容器分配flex-direction属性。column

更新了小提琴。

于 2013-05-11T04:06:19.787 回答
3

也许您可以添加：

flex-direction: column;

在您的媒体查询中。

看看这里：http: //jsfiddle.net/ChX8J/4/

于 2014-04-07T10:47:13.587 回答