1
私は新しいcss3フレックスボックスモデルを使ってレイアウトを作ろうとしています。私は高さの100％を占めるページを必要とし、固定フッターとヘッダーを使用し、残りの内容は中央の列にあります。コンテンツの列は、固定された最大幅まで幅の100％を占める必要があります。また、すべてが中央に整列する必要があります。最大幅は、Firefoxの柔軟なボックスモデルでは機能しませんか？
私はそれを正確にthis demoのspecにビルドすることができました。これはクロームやウェブキットベースのブラウザでうまくいきます。しかし、Firefoxでは、 "max-width"プロパティを追加することで、すべてが固定列を左揃えにします。
誰もがこれがFirefoxで動作しない理由を教えてもらえますか？それは仕様の別の解釈ですか、それとも私のコードのエラーですか？
これは、デモのHTMLです：あなたはヤモリに使用しているものは何もするがありませんXULのフレキシボックスモデルは、そこにある
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; }