Question

我正在尝试使用新的css3 flexbox模型进行布局。我想要一个占据100％高度的页面，使用固定的页脚和标题，其余内容位于中间的列上。内容列应占据宽度的100％，直到固定的最大宽度。此外，一切都应该在中心对齐。

我设法完全根据this demo中的规范构建它，它在chrome或任何基于webkit的浏览器中都很棒。但它在firefox中中断，添加“max-width”属性使得所有内容都固定在左侧。

任何人都可以为我注意为什么这不适用于Firefox？它是对规范的不同解释，还是我的代码中的错误？

这是演示的HTML：

    <div class="container">
        <div class="header">Header</div>
        <div class="content">   
            <div class="fixed">
                <h1>Title</h1>
                <div class="someText">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula sodales risus quis rhoncus. Donec suscipit lorem ante. Nullam tempor, lorem sit amet faucibus dictum, est nisl aliquam felis, a tempor arcu massa sit amet felis. Donec a blandit mi. Sed posuere, lacus eu scelerisque porttitor, turpis sem aliquam nulla, ut rutrum sem libero a felis. Morbi nec sodales odio. Nulla facilisi. Sed consectetur pellentesque arcu, in laoreet nulla semper ac. Pellentesque vulputate sem eget eros condimentum in malesuada dui convallis. Vivamus tristique velit id justo laoreet vestibulum. Nulla orci nisl, vulputate vitae facilisis sit amet, ultricies id massa. Sed eget faucibus magna. Integer a leo sem, hendrerit fermentum libero.</p>
                    <p>In gravida faucibus dui, quis bibendum est ornare nec. Cras ac metus a dui rhoncus mattis. Nulla ut hendrerit est. Cras sed sem felis, venenatis tincidunt ipsum. Vestibulum id sodales ligula. Nunc sit amet neque vel ante aliquam commodo. Aenean elit felis, imperdiet sagittis lacinia ut, tincidunt accumsan arcu. Vivamus dapibus ligula a est convallis eget tincidunt libero interdum. Nunc mattis, odio et tincidunt egestas, orci ante pharetra nulla, hendrerit ultrices nunc ipsum nec sem. Vestibulum egestas leo pulvinar massa mollis sit amet dapibus velit venenatis. Etiam molestie posuere lacinia. Nam ut nulla elit, ac tincidunt tellus. Nulla mollis metus id ante accumsan et mattis est ultricies. Morbi nec nunc nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="fixed">Footer</div>
        </div>
    </div>

这是CSS：

            body, html {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                background:black;
            }

            .container {
                height: 100%;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;

                display: -moz-box;
                -moz-box-orient: vertical;

            }

            .header, .footer {
                background-color: #32403C;
                height: 40px;
                width: 100%;
                margin: 0;
                line-height: 40px;
                vertical-align: middle;
                text-align: center;
                color: #FFF;
                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack: center;   
                display: -moz-box;
                display: -webkit-box;
                -webkit-box-flex: 0;    
            }


            .content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-flex: 1;

                display: -moz-box;
                -moz-box-orient: vertical;
                -moz-box-flex: 1;

                -webkit-box-align:center;
                -moz-box-align:center;
                box-align:center;

                -webkit-box-pack: center;
                -moz-box-pack: center;
                box-pack: center;   
            }

            .fixed {
                background:#787;
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                width:100%;
                max-width:480px;
                overflow:hidden;
                display: -webkit-box;
                display: -moz-box;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
            }

            .someText {
                -webkit-mask-image: -webkit-linear-gradient( black, black 75%, transparent 95%);
                -moz-box-flex: 1;
                -webkit-box-flex: 1;
                box-flex: 1;
                overflow:scroll;    

            }

            .content {  background: #876; }
            .colorLight { background-color: #A6687B; }
            .colorMedium { background-color: #8C605F; }
            .colorDark { background-color: #735E5A; }

Answer 1

你在Gecko中使用的是XUL flexbox模型，它与您正在阅读的旧的CSS flexbox草稿无关（这也与当前的flexbox草稿无关，它们使用完全不同的显示值等）。

特别是，display: -moz-box已经存在了10多年并且具有它所具有的任何行为，而您正在阅读的弹性框草稿更新，并且具有与-moz-box行为完全不同的行为。 WebKit flexbox实现在第一个W3C草案后发布或与它们同时发生，因此更接近于那些草案所涉及的内容。但同样，目前的草案与早期的草案完全不同......

在Firefox中灵活的盒子模型中，最大宽度不起作用？

1 个答案: