我正在尝试使用CSS flexbox布局创建带标题的多标签组。 我遇到了一些问题,其中一些元素没有在IE11中包装文本。
我尝试过在Stack Overflow上讨论的其他类似问题,向儿童添加weight:100%
,或者使用flex: 1
或flex: 1 auto
,但这些问题都没有解决问题。
https://codepen.io/Oboluse/pen/mmNaoR
.tabSection {
display: flex;
}
h3 {
padding: 10px;
border: 1px solid gray;
}
.tabGroup {
display: flex;
align-items: flex-end;
max-width: 100%;
}
.header {
flex: 1 0 auto;
text-align: center
}
.tabGroupParent {
display: flex;
flex-direction: column;
border: 3px solid green
}
.tab {
flex: 0 1 auto;
}
<div class="tabSection">
<div class="tabGroupParent">
<span class="header">header</span>
<div class="tabGroup">
<h3 class="tab">
column value stuff stuff 1
</h3>
<h3 class="tab">
column value stuff stuff 2
</h3>
<h3 class="tab">
column value stuff stuff 3
</h3>
</div>
</div>
<div class="tabGroupParent">
<span class="header">header</span>
<div class="tabGroup">
<h3 class="tab">
column value stuff stuff 4
</h3>
</div>
</div>
</div>
我注意到如果从flex-direction: column;
中删除.tabGroupParent
,那么子元素会在IE11中开始包装但我丢失了标题。在这种情况下,还有另一种方法可以实现居中标题吗?或者如何在不删除flex-direction: column
的情况下将子元素包装在IE11中?
答案 0 :(得分:0)
您可能需要添加浏览器前缀,如下所示
.tabGroupParent {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
// flex-direction: column;
border: 3px solid green
}