合理化内容和弹性增长被忽略 [英] justify-content and flex-grow being ignored

问题描述

我在CSS flexbox上遇到问题.昨天我有一个有效的代码，而今天当我测试我的解决方案时，由于某种原因它停止了工作.它与flexbox有关.

I'm having a problem with CSS flexbox. I had a working code yesterday yet today when I tested my solution it stopped working for some reason. It has to do with flexbox.

这是我想要的结果:

1. 使用justify-content可以定位内容.失败
2. 内容应占用所有可用空间，因此必须具有flex-grow: 1.这也失败了.
3. 页脚应该在底部，因为flex-grow: 1可以使内容通过占用所有可用空间来将其压低.这会失败.

1. To be able to position the content with justify-content. This fails
2. Content should take all the available space so it has flex-grow: 1. This fails, as well.
3. The footer should be at the bottom since the content would push it down by taking all the available space thanks to flex-grow: 1. This fails.

似乎整个flexbox对我来说都无法正常工作.

It seems that whole flexbox stopped working correctly for me.

我相信问题是由于某种原因，flexbox甚至无法正确响应此问题:

I believe the problem is that for some reason flexbox does not even respond correctly to this:

`justify-content: flex-start`

如果我尝试其他任何值，例如center，flex-end等，则什么都没有发生.

If I try any other values there like center, flex-end, etc nothing happens.

有趣的是，昨天的flexbox表现正常，我可以用justify-content定位它，而今天却不能.

Funny thing is that yesterday flexbox was behaving correctly, I could position it around with justify-content and today I can't.

我在这里缺少什么，为什么至少justify-content: flex-end或justify-content: center不能正确地表现并定位内容?

What am I missing here why is not at least justify-content: flex-end or justify-content: center doing behaving correctly and positioning the content?

如果我解决了导致justify-content停止工作的问题，我相信flex-grow也会起作用.

If I fix the problem that causes justify-content to stop working I believe flex-grow will also work.

有人知道为什么它行为不正常吗?

Does anyone have an idea why it's misbehaving?

我可以灵活地使用这个游乐场，因此我知道我的代码应该可以工作，上面的代码正是我在游乐场所做的: https://demos.scotch.io/visual -guide-to-css3-flexbox-flexbox-playground/demos/

I can get flex to behaving using this playground so I know my code should be working, My code above is exactly what I did here in the playground: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

.ikigai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header, .footer {
  height: 80px;
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

https://jsfiddle.net/re01pn2x/

推荐答案

您的flex容器未定义高度.

Your flex container has no height defined.

因此，它默认为height: auto(内容驱动的高度).

Therefore, it defaults to height: auto (content-driven height).

将此添加到您的代码中:

Add this to your code:

.ikigai {
   height: 100vh;
}

.ikigai {
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */ /* default value; not necessary */
  height: 100vh;
}

.header, .footer {
  height: 80px;
  flex-shrink: 0; /* optional; if you don't want items to shrink vertically */
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

body {
  margin: 0; /* override default margins; prevents vertical scrollbar */
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

更多详细信息:如何将div设置为浏览器窗口高度的100％?

justify-content

justify-content

请注意，justify-content在您的代码中不起作用，因为没有可用的可用空间.此属性通过在容器中分配可用空间来工作.在这种情况下，由于容器默认为height: auto，因此只有足够的空间来容纳内容.

Note that justify-content wasn't working in your code because there was no free space available. This property works by distributing free space in the container. In this case, because the container was defaulting to height: auto, there was only enough space to accommodate the content.

justify-content& flex-grow

justify-content & flex-grow

还要注意，即使定义了height会创建额外的空间，如果使用flex-grow，justify-content也将不起作用.为什么?因为flex-grow将占用该可用空间，所以再次没有空间供justify-content分发.

Also note that even with a height defined that creates extra space, justify-content will not work if you use flex-grow. Why? Because flex-grow will consume that free space, again leaving no space for justify-content to distribute.

这篇关于合理化内容和弹性增长被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！