Question

请帮助我理解灵活的盒子布局模型的一个问题，我在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;
}

标题框的最大宽度约束为400px，而页脚的固定宽度为400px。当我在基于Gecko的浏览器中尝试此代码时（在我的情况下是Firefox 21和24），页眉和页脚都是水平居中的（正如我希望的那样，给它们左右自动边距）但只有页脚的宽度为400px而即使有足够的水平空间，标题的宽度也只是内容的宽度。

在基于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的设置。（没有它，实际上没有测试任何关于flexbox的东西。）

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

Answer 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时，li元素收缩包装。在column方向下，只有Firefox和Opera收缩包装li，而Chrome则使用灵活容器的整个宽度。

Answer 2

Firefox / Gecko行为是正确的。

由于header元素的默认“align-self：stretch”值，WebKit最多可扩展到400px（最大宽度）。但是，规范很清楚，如果横轴没有自动边距，则“align-self：stretch”仅 。引用规范：

如果弹性项目具有'align-self：stretch'，[...]并且都没有横轴边距为'auto'，使用的外横交叉尺寸其柔性线的十字尺寸，根据项目的最小值和最小值进行夹紧最大交叉尺寸属性 http://www.w3.org/TR/css3-flexbox/#cross-sizing

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

现在，要实现所需的布局：看起来你想要拉伸和居中，我认为你不能在横轴上同时获得这两个东西。

您可以同时在Flex容器的 main 轴中获取它们 - 因此您可以通过在页眉和页脚周围添加水平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>

我认为这可以通过将页眉和页脚分别包装在水平弹性容器中来实现您正在寻找的布局。柔性容器延伸到其父级（主体）的宽度，并且在其内部我们有一个柔性项目（例如），它具有灵活性，直到其最大宽度，并且我们居中（带有自动边距）一次它达到了最大宽度。

灵活的盒子布局模型：横轴方向的自动边距应如何表现？

2 个答案: