CSS3 - Flex包装不工作IOS 10.1.1 Safari和Chrome
问题描述:
我想使用柔性包装和最小宽度:50%到动态网格布局,其中单个单元占据所有宽度。问题在于它在iOS 10.1.1(iPhone 5c)Safari和Chrome中无法正常工作 - 显示屏不是网格状,而是水平布局。在桌面版Chrome(Ubuntu)和Android Chrome中工作正常。CSS3 - Flex包装不工作IOS 10.1.1 Safari和Chrome
的jsfiddle演示:https://jsfiddle.net/9dscc1Lq/
代码:
<style>
body {
width: 300px;
}
.tabs {
width: 100%;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
box-sizing: border-box;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
min-width: 50%;
box-sizing: border-box;
flex: 1 1 0;
-webkit-flex: 1 1 0;
text-align: center;
}
</style>
<div class="tabs">
<div class="gwt-HTML tab">1</div>
<div class="gwt-HTML tab">2</div>
<div class="gwt-HTML tab">3</div>
<div class="gwt-HTML tab">4</div>
<div class="gwt-HTML tab">5</div>
</div>
预计的布局(正确):
请指教!
答
min-width
不工作按预期在iOS上,使用flex-basis
这样flex: 1 1 50%;
源:https://bugs.webkit.org/show_bug.cgi?id=136041
此外,使用前缀属性时,你应该总是把他们的前缀的版本之前。
.tabs {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
box-sizing: border-box;
-webkit-flex: 1 1 50%;
flex: 1 1 50%;
text-align: center;
}
<div class="tabs">
<div class="gwt-HTML tab">1</div>
<div class="gwt-HTML tab">2</div>
<div class="gwt-HTML tab">3</div>
<div class="gwt-HTML tab">4</div>
<div class="gwt-HTML tab">5</div>
</div>
感谢。我也将该模式应用于其他Flex布局,并且它工作正常,我只是不知道最小宽度在IOS中折断了Flex。 –
我正在尝试,但它不工作=(它把所有3列在一起,而不是最后一个在底部=(iPhone 5s 8.3这里 – Cheshire
@Cheshire这个答案'最小宽度'问题,你似乎谈论一个_height_问题,请发表一个自己的问题,用最小的工作代码片段导致你的问题,我们会尽力帮助你,如果你愿意,你可以在这里通过链接通知我。 – LGSon