2

请帮助我了解灵活的盒子布局模型的一个问题，我在 Firefox 和 Chrome 中得到不同的结果。

考虑以下 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）中尝试此代码时，页眉和页脚都是水平居中的（我希望通过给它们左右自动边距）但只有页脚的宽度为 400 像素，而即使有足够的水平空间可用，标题的宽度也只是内容的宽度。

在基于 WebKit/Blink 的浏览器（在我的例子中是 Chrome 25 和 28）中，页眉和页脚都居中并且都是 400px 宽（如果有足够的水平空间），这正是我想要实现的。

显然，Firefox 或 Chrome 一定是错误的。您如何理解规范：http ://www.w3.org/TR/css3-flexbox/ ://www.w3.org/TR/css3-flexbox/ ？期望的行为是什么？

如果你想玩，这里有一个 JSFiddle：http: //jsfiddle.net/4Rv7K/。

请注意，必须在 Firefox 的发布版本中启用灵活的盒子布局模型。它是设置 layout.css.flexbox.enabled。（没有它，实际上就不会测试任何关于 flexbox 的东西。）

PS：该错误在 Chromium 的引擎中，现在显然已修复：https ://code.google.com/p/chromium/issues/detail?id=242654

4

2 回答 2

2

Firefox/Gecko 的行为是正确的。

由于标题元素的默认“align-self:stretch”值，WebKit 最多可拉伸 400 像素（最大宽度）。但是，规范很清楚，“align-self:stretch”只有在交叉轴上没有自动边距时才应该拉伸。引用规范：

如果一个弹性项目有'align-self:stretch'，[...]并且它的两个交叉轴边距都不是'auto'，使用的外部交叉大小是它的弹性线的使用交叉大小，根据项目的最小和最大交叉尺寸属性 http://www.w3.org/TR/css3-flexbox/#cross-sizing

“它的横轴边距都不是自动的”的例外是 Firefox 在这里所尊重的，而 WebKit/Blink 似乎被忽略了。

现在，要实现您想要的布局：看起来您既想要伸展性又想要居中，我认为您不能同时在交叉轴上获得这两个东西。

不过，您可以在 flex 容器的主轴上同时获取它们——因此您可以通过在页眉和页脚周围添加一个水平的 flex 容器来解决这个问题。

我在这里做到了：http: //jsfiddle.net/4Rv7K/16/

相关代码（为简单起见仅使用“标题”）：

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
horizFlex {
    display: -webkit-flex;
    display: flex;
}
header {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    max-width: 400px;
    height: 20px;
    background-color: yellow;
    margin: 0 auto;
}
[...]
<body><horizFlex><header>Header</header></horizFlex></body>

我认为这可以通过将页眉和页脚分别包装在一个水平的 flex 容器中来实现您正在寻找的布局。flex 容器拉伸到其父级（主体）的宽度，在其中我们有一个 flex 项（例如 ），它在最大宽度范围内是灵活的，并且我们将其居中（使用自动边距）一次它已达到其最大宽度。

于 2013-05-22T04:28:25.780 回答
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 同意 li 元素在方向为时收缩包装row。在这个column方向下，只有 Firefox 和 Opera 收缩包裹 li，而 Chrome 让 li 占据 flex 容器的整个宽度。

于 2013-05-22T02:21:24.233 回答