Question

我正在使用Flexbox制作一个响应式网站（我第一次做了其中任何一个，请记住）并且一切顺利，直到我在某个时候意识到具有相同属性的flex项目不是表现方式相同。

看看这个，即使我通过Autoprefixer运行CSS，但我在Chrome中遇到了一些问题，但这是另一个问题。如果您对此有疑问，可以在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完美对齐，我确信我记得当我在不同的视口大小时排列的所有内容我昨天正在研究这个问题，所以我不确定我是否已经做了一些事情来打破它。

（如果你想知道为什么我首先有三个flex容器，而不是只有一个只有三个主列的flex容器，那么我就可以得到标题，内容框和页脚文本对齐，以及因为内容框根据内部文本的大小而扩展。我怀疑有一种更简单的方法来实现我不知道的所有这些（再次，我已经正确地做了大约五六个星期了并且拥有这三个弹性容器是我在第一步出错的地方。）

Answer 1

padding: 10px（中间行）中有#contentbox，其他行中不存在。

将box-sizing: border-box添加到#contentbox以计算该额外空间。

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

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

如果您只关注flex-basis速记的flex组件（并按照上面提到的那样添加box-sizing: border-box），则列会对齐。

Revised Fiddle

当您将窗口的大小调整为较小时，为什么您的布局会向右消失，请记住，默认情况下，弹性项目不能小于其内容的大小（无论flex-shrink值是否为min-width: 0 ）。您需要使用{{1}}覆盖此初始设置（请参阅下面的参考资料）。

参考文献：

Answer 2

您为列设置了不同的flex-basis，同时指定了他们的flex属性。为了使项目完全对齐，您必须确保在不同的行中使用相同的值。

由于您已经在使用autoprefixer，因此您已经可以访问现代CSS处理器。我建议您将测量值提取到一个变量中，您可以将其重复用于特定项目。

具有相同属性值的Flex项目呈现不同大小

2 个答案: