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

Posted 2023-03-06

技术标签:

【中文标题】当我将它们的元素设置为彼此堆叠（块）时，为啥我的 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, lipadding: 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 */
        .errorcolor: #f00; 
        .leftfloat: left; 
        .rightfloat: right; 
        .clearclear: both; 
        .hidedisplay: 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)
            navmax-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 父级中的元素是相邻浮动的，而不是堆叠的？感谢您的帮助！

【问题讨论】：

【参考方案1】：

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

更新了fiddle。

【讨论】：

【参考方案2】：

也许你可以添加：