具有相同属性值的Flex项目以不同的大小呈现 [英] Flex items with same property values are rendering in different sizes

问题描述

我使用Flexbox做一个响应式网站（第一次我做任何一个，牢记），这一切都进行得很好，直到我意识到在某个时候，具有相同的属性的flex项目不是

I'm using Flexbox to make a responsive site (first time I've done either of those, bear in mind) and it was all going well until I realised at some point that flex items with the same properties weren't behaving the same way.

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

Have a look at this, I had some issues with the page in Chrome even though I ran the CSS through Autoprefixer, but that's another issue. If you have issues with this, it might be an idea to open it in Safari, which I started testing it in. You'll have to narrow the JS window to make the left-hand side visible. https://jsfiddle.net/5p7fcmxb/1/

这是丑的罪，因为我做了一切不同的颜色来区分他们，并切换到默认字体为这个线程的目的。无论如何，基本的问题是 #headerleft ， #blueleft 和 #footerleft 应该完美排列，因为他们有相同的flex属性，如下所示：

It's ugly as sin, since I made everything different colours to differentiate them and switched everything to default fonts for the purposes of this thread. Anyway, the basic problem is that the #headerleft, #blueleft and #footerleft should line up perfectly, since they have the same flex properties, as shown below:

#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窗口，所有不同的宽度。一开始我想，因为他们在单独的头，中和 code> divs，它们本身是整个 #container div的子级，由于某种原因，它们可能会在屏幕左侧包裹。我把所有的10px从左边设置，他们都排队在那一边，所以这似乎是一个问题的增长。如果我缩小页面的宽度，那么 #blueleft 和 #footerleft 元素是无形的， #headerleft div仍然可以看到。你可能已经注意到中间和右边的div不排列，但是左边div的问题的答案也应该适用于他们。

But if you expand that JSfiddle window out, you can see that they're all different widths. At first I thought since they're in separate header, middle, and footer divs, which are themselves children of the overall #container div, they might be wrapping slightly to the left of the screen for some reason. I set everything 10px from the left and they all lined up at that side, so this seems to be an issue with the growth. If I shrink the page as narrow as it will go, the #blueleft and #footerleft elements are invisble, yet the #headerleft div still can still be seen. You might have noticed the middle and right-hand divs don't line up either, but the answer to the problem of the left-hand divs should apply to them too.

这个想法是 #headermiddle 和 #footermiddle 中的文字会与 #contentbox div，我相信我记得当我昨天在这个工作时，在不同的视口大小排队，所以我不知道我是否做了一些事情，方法。

The idea was that the text in #headermiddle and #footermiddle would line up perfectly with the #contentbox div, and I'm sure I remember everything lining up at different viewport sizes when I was working on this yesterday, so I'm not sure if I've done something to break it along the way.

（如果你想知道为什么我有三个flex容器在第一，而不是有一个flex容器只有三个主要的列，我可以得到标题，内容框和页脚文本对齐，以及内容框根据多少文本内部展开我怀疑有一个更容易的方式来实现所有的，我不知道（再次，我已经正确地这样做了大约五六个星期了），有这三个flex容器是我第一步错了的地方。）

(If you're wondering why I have three flex containers in the first place, as opposed to having one flex container with just three main columns, it's so I could get the header, content box and footer text aligning, as well as having the content box expand according to how much text is inside. I suspect there is an easier way to achieve all of that that I'm not aware of (again, I've been properly doing this for about five or six weeks now) and having those three flex containers was where I went wrong at the first step.)

推荐答案

在 #contentbox （中间一行）中有一个 padding：10px

You've got a padding: 10px in #contentbox (middle row) which doesn't exist in other rows.

添加 box-sizing：border-box 到

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

Also, just because the flex rule is the same for multiple elements, doesn't mean the size of each box will be the same in each row.

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

The flex-grow and flex-shrink properties work by distributing free space in the container. In other words, they use the space which the content is not using. Because your content is different in each row, the available space will be different and, therefore, the size of each box can be different.

如果您只是关注 flex 速记（并添加 box-sizing：border-box）的code> flex-basis ，如上所述），这些列将对齐。

If you simply focus on the flex-basis component of the flex shorthand (and add the box-sizing: border-box as I mentioned above), the columns will align.

修订的小提琴

至于为什么当您重新调整大小窗口越小，请记住flex项目，默认情况下，不能小于其内容的大小（不管任何 flex-shrink 值）。您需要使用 min-width：0 （请参阅下面的参考资料）覆盖此初始设置。

As to why your layout disappears to the right when you re-size the window smaller, bear in mind that flex items, by default, cannot be smaller than the size of their content (regardless of any flex-shrink value). You'll need to override this initial setting with min-width: 0 (see reference below).

：

• flex-grow不调整flex项目大小


• 弹性基础和宽度之间有什么区别？ a>


• 填充和边框框中的缩放系数如何？


• 为什么Flex项目缩小不会超过内容大小？


• box-sizing：border-box

• 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

这篇关于具有相同属性值的Flex项目以不同的大小呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！