我使用Flexbox制作了一个响应式网站（请记住，第一次我做过任何一个），一切都进行得很好，直到我意识到某个时候具有相同属性的Flex项表现出不同的特性道路。
看看这个，即使我通过Autoprefixer运行CSS，我在Chrome中的页面还是有一些问题，但这是另一个问题。如果您对此有疑问，可以在我开始对其进行测试的Safari中打开它。您必须缩小JS窗口以使其左侧可见。https://jsfiddle.net/5p7fcmxb/1/
这很丑陋，因为为该线程的目的，我将所有颜色都设置为不同的颜色以区分它们，并将所有内容切换为默认字体。总之，基本的问题是#headerleft，#blueleft并#footerleft应完全排队，因为它们具有相同的弯曲特性，如下图所示：
#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申报单，其本身整体的孩子#container的div，他们可能会稍微向左屏幕由于某些原因的包装。我将所有内容从左侧设置为10像素，并且它们都在该侧对齐，因此这似乎是增长的问题。如果将页面尽可能缩小，则#blueleft和#footerleft元素不可见，但#headerleft仍可以看到div。您可能已经注意到中间和右边的div都不对齐，但是对左div的问题的答案也应该适用于它们。
当时的想法是，在文本#headermiddle和#footermiddle我会是完美排队与#contentboxDIV，我敢肯定，我记得所有的事情在不同的视口的大小排队时，我正在这个昨天，所以我不知道如果我做了什么一路打破。
（如果您想知道为什么我首先要有三个flex容器，而不是只有一个Flex容器只有三个主列，那么我可以使页眉，内容框和页脚文本对齐，以及内容框会根据里面的文本数量进行扩展。我怀疑有一种更简单的方法可以实现我不知道的所有内容（再次，我已经在大约五，六个星期内做了适当的操作），并且那三个flex容器是我第一步出错的地方。
您有一个padding: 10pxin #contentbox（中间行），该行在其他行中不存在。
加入box-sizing: border-box到#contentbox到因素多余的空间。
同样，仅仅因为flex规则对于多个元素是相同的，并不意味着每个框的大小在每一行中都将是相同的。
在flex-grow与flex-shrink由容器分发免费空间属性的作用。换句话说，它们使用内容未使用的空间。由于每一行的内容都不同，因此可用空间也将不同，因此，每个框的大小可能会不同。
如果您只关注速记的flex-basis组成部分flex（并添加box-sizing: border-box我上面提到的），则各列将对齐。
至于为什么当您将窗口的大小调整为较小时布局为何会在右侧消失，请记住，弹性项目默认情况下不能小于其内容的大小（无论任何flex-shrink值）。您需要使用覆盖此初始设置min-width: 0（请参见下面的参考）。
参考：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句