Flexbox柱高 [英] Flexbox column heights

查看:352
本文介绍了Flexbox柱高的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这个网站: http://kudos-topspindigital.azurewebsites.net/#/netball



如果您在Chrome和IE中开启这项功能,就会看到我的问题。
基本上在chrome中,右边的面板是在相等的高度。我想要的底部面板(橙色和深灰色一)的高度是顶部浅灰色面板的两倍。
一次,IE有它的权利。它实际上将底部面板调整为flex:2.
我如何让chrome来做同样的事情?

解决方案

由于 flex 是缩写属性, flex:1 变成



< pre-class =lang-css prettyprint-override> flex-grow:1;
flex-shrink:1;
flex-basis:0%;

0%列布局。您可以使用 flex-basis:0 修复它:

  .row {
flex-basis:0;
}


I have this site: http://kudos-topspindigital.azurewebsites.net/#/netball

If you open this in Chrome and IE you will see my issue. Basically in chrome, the right panels are around equal heights. I would like the bottom panels (the orange and dark gray one) to be twice as height as the top light gray panel. For once, IE has got it right. It actually resizes the bottom panels as flex: 2. How can I get chrome to do the same?

解决方案

Since flex is a shorthand property, flex: 1 becomes

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

That 0% seems to confuse Chrome in column layouts. You can use flex-basis: 0 to fix it:

.row {
  flex-basis: 0;
}

这篇关于Flexbox柱高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆