Flexbox柱高

本文介绍了Flexbox柱高的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有这个网站： http://kudos-topspindigital.azurewebsites.net/#/netball 如果您在Chrome和IE中开启这项功能，就会看到我的问题。 基本上在chrome中，右边的面板是在相等的高度。我想要的底部面板（橙色和深灰色一）的高度是顶部浅灰色面板的两倍。 一次，IE有它的权利。它实际上将底部面板调整为flex：2. 我如何让chrome来做同样的事情？解决方案由于 flex 是缩写属性， flex：1 变成 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/#/netballIf 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 becomesflex-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柱高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！