1

新しい css3 flexbox モデルを使用してレイアウトを作成しようとしています。高さの 100% を占めるページが必要で、固定フッターとヘッダーを使用し、残りのコンテンツは中央の列にあります。コンテンツ列は、固定された最大幅まで幅の 100% を占有する必要があります。また、すべてを中央に揃える必要があります。

このデモの仕様どおりに正確にビルドすることができました。これは、クロムまたは Webkit ベースのブラウザーでうまく機能します。しかし、「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; }
4

1 に答える 1

2

Gecko で使用しているのは、XUL フレックスボックス モデルです。これは、明らかに読んでいた古い CSS フレックスボックス ドラフトとは何の関係もありません (これは、まったく異なる表示値を使用する現在のフレックスボックス ドラフトとは何の関係もありません。等)。

特に、display: -moz-boxは 10 年以上前から存在しており、あらゆる動作をしていますが、あなたが読んでいたフレックスボックスのドラフトはもっと新しく、その動作とはまったく異なる動作をしてい-moz-boxます。WebKit flexbox の実装は、最初の W3C ドラフトよりも後の日付であるか、それらと同時期であるため、これらのドラフトで述べられている内容により近くなっています。繰り返しになりますが、現在のドラフトは初期のものとはまったく異なります...

于 2011-08-11T16:32:06.093 に答える