使用Flexbox的布局角UI选项卡 [英] Using flexbox layout with angular-ui tabs

问题描述

我wan't使用具有角UI选项卡（ui.bootstrap.tabs）Flexbox的布局。我有这个plunker：

I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:

http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa

我改变了UI模板因此，所有的div得到Flexbox的类。尽管如此标签内容的div不填补了充分的可用空间。

I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.

你知道吗？

推荐答案

我已经找到了解决办法。下面是一个更新plunker：

I have found a solution. Here is an updated plunker:

http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=$p$ PVIEW

关键是要覆盖.TAB内容>。主动'类的显示属性。默认情况下它设置为显示：块。它必须被设置为显示：柔性。

The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.

这篇关于使用Flexbox的布局角UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！