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

【问题标题】：Why do my flex-box elements "float" next to each other when I've set their elements to stack on top of each other (block)?当我将它们的元素设置为彼此堆叠（块）时，为什么我的 flex-box 元素会“浮动”彼此相邻？
【发布时间】：2013-05-05 19:04:36
【问题描述】：

我有一组元素，我想在页面为特定宽度 (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 父级中的元素是相邻浮动的，而不是堆叠的？感谢您的帮助！

【问题讨论】：

标签： css layout media-queries flexbox

【解决方案1】：

想通了。没有将 column 的 flex-direction 属性分配给 flex-box 容器。

更新了fiddle。

【讨论】：

【解决方案2】：

也许你可以添加：

flex-direction: column;

在您的媒体查询中。

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

【讨论】：

谢谢@Marconi，但我已经找到了答案。见：stackoverflow.com/questions/16493386/…