2

Firefox と Chrome で異なる結果が得られるフレキシブル ボックス レイアウト モデルに関する 1 つの問題を理解するのを手伝ってください。

次の HTML フラグメントを検討してください。

<body>
    <header>Header</header>
    <footer>Footer</footer>
</body>

経由でスタイリング

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

header {
    max-width: 400px;
    height: 20px;
    background-color: yellow;
    margin: 0 auto;
}

footer {
    width: 400px;
    height: 20px;
    background-color: green;
    margin: 0 auto;
}

ヘッダー ボックスの幅は最大 400 ピクセルに制限されていますが、フッターの幅は 400 ピクセルに固定されています。このコードを Gecko ベースのブラウザー (私の場合は Firefox 21 と 24) で試してみると、ヘッダーとフッターの両方が水平方向に中央に配置されます (左右の自動マージンを与えることで望んでいたように)。ヘッダーの幅は、水平方向に十分なスペースがある場合でもコンテンツの幅になります。

WebKit/Blink ベースのブラウザー (私の場合は Chrome 25 と 28) では、ヘッダーとフッターは両方とも中央に配置され、幅は両方とも 400px (十分な水平スペースがある場合) であり、これはまさに私が達成したいことです。

明らかに、Firefox か Chrome のどちらかが間違っているに違いありません。仕様をどのように理解していますか: http://www.w3.org/TR/css3-flexbox/ ? 望ましい動作は何ですか？

試してみたい場合は、JSFiddle: http://jsfiddle.net/4Rv7K/をご覧ください。

Firefox のリリース バージョンでは、フレキシブル ボックス レイアウト モデルを有効にする必要があることに注意してください。layout.css.flexbox.enabled の設定です。(それがなければ、実際にはフレックスボックスについて何もテストしていません。)

PS: このバグは Chromium のエンジンにあり、現在は修正されているようです: https://code.google.com/p/chromium/issues/detail?id=242654

4

2 に答える 2

1

自動マージンで明確なサイズがない要素の場合、要素のfit-content幅が要素の実際の幅として使用され、残りのスペースがマージンとしてカウントされるように見えます。Chrome の場合、 を使用した場合にのみ不適切な動作をしているようflex-direction: columnです。

http://codepen.io/cimmanon/pen/fuhyF

ul {
  display: -webkit-flex;
  display: flex;
  height: 5em;
  background: yellow;
}

li {
  margin: auto;
  border: 1px solid;
}

ul.column {
  -webkit-flex-direction: column;
  -flex-direction: column;
}

上記のスタイルのリストを見ると、Opera、 Firefox、および Chrome は、方向がrow. このcolumn方向の下では、Firefox と Opera のみが li をシュリンク ラップしますが、Chrome では li がフレックス コンテナーの全幅を占めます。

于 2013-05-22T02:21:24.233 に答える