我有这个css:CodePen
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body,html {
width:100%; height: 100%;
}
.v-field, .v-field-label {
border: 1px #bcbcbc solid;
border-radius: 4px;
}
.vc-min-200 {
min-width: 300px;
}
.vc-6 {
width:50%;
}
.panel{
border:1px #ccc solid;
}
.row {
outline: 1px #c00 solid;
}
form.v-form {
margin-top: 10px;
}
form.v-form .row.flex {
margin: 15px 0px;
display: flex;
flex-wrap:wrap;
}
form.v-form .row.flex > div {
margin: 10px 0px;
padding: 0px 5px;
flex: 1 1 auto;
/*flex: 1 1 200px;*/
}
form.v-form .v-field, form.v-form .v-field-label {
width: 100%;
padding: 6px 12px;
}
我们的想法是拥有一个最多有2列50%宽度的表单,但是当窗口大小调整到最小宽度以下时,它应该包装成一列。
它在桌面Chrome和Android上运行良好,但在iOS(10.0.2)上无法正确包装。我附上了截图。
如果我取消注释flex: 1 1 200px
行,那么它在iOS上工作正常但在窗口大小允许的情况下在桌面上产生3列,这不是我想要的。是否有适用于桌面和iOS的解决方案?
答案 0 :(得分:0)
我认为您的问题与this Safari bug有关,在px中忽略flex基础而不是百分比。你可以尝试百分比并让我知道吗?如果我对flex有正确理解:1 1 50%;你会得到理想的效果。
form.v-form .row.flex > div {
margin: 10px 0px;
padding: 0px 5px;
flex: 1 1 50%;
}
笔here