html - 具有相同属性值的 Flex 元素以不同的尺寸呈现

Question

我正在使用 Flexbox 制作一个响应式网站(我是第一次做这些，请记住)并且一切都很顺利，直到我在某个时候意识到具有相同属性的 flex 元素不是行为方式相同。

看看这个，即使我通过 Autoprefixer 运行 CSS，我在 Chrome 中的页面也有一些问题，但这是另一个问题。如果您对此有疑问，最好在 Safari 中打开它，我开始在 Safari 中对其进行测试。您必须缩小 JS 窗口以使左侧可见。 https://jsfiddle.net/5p7fcmxb/1/

这太丑陋了，因为我把所有的东西都用不同的颜色来区分它们，并且为了这个线程的目的把所有的东西都切换成默认字体。无论如何，基本问题是 #headerleft、#blueleft 和 #footerleft 应该完美对齐，因为它们具有相同的 flex 属性，如下图:

#headerleft {
    background-color: red;
    height: 75px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

#blueleft {
    background-color: yellow;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

#footerleft {
    background-color: red;
    height: auto;
    padding: 0px;
    margin: 0px;
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

但是，如果您将 JSfiddle 窗口展开，您会看到它们的宽度各不相同。起初我认为，因为它们位于单独的 header、middle 和 footer div 中，它们本身是整个 的子元素# container div，由于某种原因，它们可能会稍微绕到屏幕左侧。我将所有内容都设置为距左侧 10px，它们都在那一侧排成一行，所以这似乎是增长的一个问题。如果我尽可能缩小页面，#blueleft 和 #footerleft 元素是不可见的，但 #headerleft div 仍然可以仍有待观察。您可能已经注意到中间和右侧的 div 也不对齐，但是左侧 div 问题的答案也应该适用于它们。

当时的想法是 #headermiddle 和 #footermiddle 中的文本将与 #contentbox div 完美对齐，我我确实记得昨天做这个时所有东西都以不同的视口(viewport)大小排列，所以我不确定我是否做了一些事情来打破它。

(如果你想知道为什么我首先要有三个 flex 容器，而不是只有一个只有三个主要列的 flex 容器，这样我就可以让页眉、内容框和页脚文本对齐，以及因为内容框会根据里面的文本量进行扩展。我怀疑有一种更简单的方法可以实现我不知道的所有这些(同样，我已经正确地做了大约五六个星期了) 而这三个 flex 容器是我在第一步中出错的地方。)

Answer 1

您在 #contentbox(中间行)中有一个 padding: 10px，它在其他行中不存在。

将 box-sizing: border-box 添加到 #contentbox 以考虑额外的空间。

此外，仅仅因为 flex 规则对于多个元素是相同的，并不意味着每一行中每个框的大小都相同。

flex-grow 和 flex-shrink 属性通过分配容器中的可用空间来工作。换句话说，他们使用内容未使用的空间。由于每一行的内容不同，可用空间也会不同，因此每个框的大小也可能不同。

如果您只关注 flex 简写的 flex-basis 组件(并添加 box-sizing: border-box 作为我在上面提到过)，列将对齐。

Revised Fiddle

至于当您将窗口调整为更小的尺寸时，为什么您的布局会向右消失，请记住，默认情况下， flex 元素不能小于其内容的大小(无论任何 flex-shrink 值)。您需要使用 min-width: 0 覆盖此初始设置(请参阅下面的引用资料)。

引用资料:

• flex-grow not sizing flex items as expected
• What are the differences between flex-basis and width?
• How does flex-shrink factor in padding and border-box?
• Why doesn't flex item shrink past content size?
• box-sizing: border-box