无法使CSS flexbox正常展开

时间:2015-08-04 02:17:19

标签: html css css3 flexbox

所以我有一个后视图,我无法正常工作,而flexbox似乎就像我正在寻找的天堂答案。除此之外,无论如何我都无法正确地理解......

如果您查看this代码,则会有两个垂直div,它们都会延伸,因为更多内容会添加到其中。更多内容出现的div相应地增长,但我希望另一个div的长度匹配,因此底边与Flex框的底部对齐。两个创始人按钮背后的重复图像和#34; LOTS OF TEXT"然后应该将空白区域填充到底边图像所在的底部。

我已经在这一周度过了一个愉快的一周,并且无法弄清楚...我很抱歉,如果这是一件非常简单的事情,或者我对css,我还在学习。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

.forumviewright课程中,添加以下属性:

height: 100px;

这将基线结合在一起。

刚刚在Chrome开发工具中测试过它。有用。它也适用于 FIDDLE 。但它似乎不适用于您提供的CSSDesk示例。

这是否是您正在寻找的永久解决方案,您可以在下面的评论中告诉我。

修改

您的问题始于:

  

无法正确扩展CSS flexbox。

实际上,flexbox工作正常。根据flexbox规则,两列相互绑定并均匀扩展。

如果您在Chrome开发者工具或Firefox检查器中突出显示子div(.forumviewleft.forumviewright),您会看到两列的高度相等并且无论内容大小如何都相互跟踪在任何一方。

为了说明这一点,我为每个列div添加了背景颜色,以便您可以看到flex正常工作。没有对代码进行任何其他更改。在此示例中,无论在任一列中放置了多少内容,两个颜色编码的列都保持相等的高度。

https://jsfiddle.net/eympj0yq/2/

当然,真正的问题是这些列中的子容器框没有相互跟踪。

这需要对您的代码进行一些基本调整。为了更好地理解此问题以及如何解决此问题,请参阅以下文章:

Height 100% on flexbox column child

希望这会有所帮助。祝你好运!