[英]FlexBox doesn't work with iPhone 6
Having very weird problem with FlexBox testing on a iPhone6 .具有Flexbox将在iPhone6测试非常奇怪的问题。 On iPhone6 the FlexBox elements are not shown at all.
在 iPhone6 上,FlexBox 元素根本没有显示。 As I understand they are hidden beneath each other.
据我所知,它们隐藏在彼此之下。
As I don't own such device - I can't test it... I've used some online browser testers with trial subscription.因为我没有这样的设备 - 我无法测试它......我使用了一些在线浏览器测试仪进行试用订阅。 I've made this jsFiddle :
我做了这个jsFiddle :
.flex-container {
display:-webkit-box;
display:flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
text-align:center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
}
.flex-container .item h2{
font-size: 1.1em;
font-weight: 300;
}
.flex-container>div {
-webkit-box-flex: 0;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
max-width: 50%;
}
.flex-container .item:first-child {
background: #986a4b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
}
.flex-container .item.third, .flex-container .item.third article{
background: #fff;
color:#986a4b;
}
.flex-container .item:nth-child(4) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*IE11*/
.flex-container .item .first{height: /*100%;*/ auto; min-height: 1px;}
.flex-container .item img {
width: 100%;
}
.flex-container .item:not(img){
padding: 1em;
}
.flex-container .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
color: #fff;
font-size: 0.9em;
}
.flex-container .item {
background: #fff;
}
.flex-container .margin{padding:60px;}
.flex-container article {
color: #9f6a4a;
}
@media screen and (max-width: 1000px){
.flex-container .item .box .inner{font-size:1.5em;}
.flex-container .item{-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;}
}
@media screen and (max-width: 600px){
.flex-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
Through a browserstack it seems to work well.通过浏览器堆栈,它似乎运行良好。 But on my live website it doesn't... The code is the same.
但是在我的实时网站上它没有...代码是相同的。 I really don't understand how to fix it.. Already used such hacks such as
min-height: 1px
but no luck...我真的不明白如何修复它.. 已经使用了诸如
min-height: 1px
类的黑客但没有运气......
Could be resolved in two ways: 1).可以通过两种方式解决:1)。 shorthand:
flex: 1 1;
简写:
flex: 1 1;
2). 2)。
-webkit-flex: 1 1 100%;
replaced dispaly: flex;替换显示:flex; with display: -webkit-flex
带显示:-webkit-flex
solved it for me为我解决了
you have to add... 您必须添加...
display: -webkit-flex; 显示:-webkit-flex;
in your css. 在你的CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.