Question

我有一组元素，当页面是特定宽度（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父级内部的元素是彼此相邻的，而不是堆叠？谢谢你的帮助！

Answer 1

想出来。没有将flex-direction column属性分配给flex-box容器。

更新了fiddle。

Answer 2

也许你可以添加：

flex-direction: column;

在媒体查询中。

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

当我将它们的元素设置为彼此堆叠（块）时，为什么我的flex-box元素“浮动”彼此相邻？

2 个答案: