CSS3 - 在iOS 10.3.2(Chrome和Safari)上使用Flex wrap时遇到问题
在您将其他问题(如我的)引荐给我之前,我已经浏览了他们,尝试了他们的解决方案,但他们并不适合我。CSS3 - 在iOS 10.3.2(Chrome和Safari)上使用Flex wrap时遇到问题
我的问题在于flexbox的布局。我正在为我的网站上的某些元素使用Flexbox布局。
我使用的是flex-wrap: wrap
,这在我的桌面测试环境中可以正常工作,但是当我尝试在移动设备上测试它时,Flex项目并未包装,它们都显示在同一行上。
.flexContainer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
flex-direction: row;
/* justify-content: space-around;*/
}
.flexContainerBox {
-webkit-flex: 1;
flex: 1;
border-top: 20px solid transparent;
position: relative;
padding: 20px;
max-width: 100%;
font-family: "Open Sans Bold";
}
.flexContainerBoxBorderRight {
border-right: 1px solid #ccc;
position: absolute;
top: 10%;
bottom: 25%;
right: 0;
}
@media screen and (max-width: 566px){
.flexContainerBoxBorderRight {
display: none;
}
}
.flexContainerBox1 {
border-top-color: #15AF04;
color: #15AF04
}
.flexContainerBox2 {
border-top-color:#E4A621;
color: #E4A621;
}
.flexContainerBox3 {
border-top-color: #1b63b1;
color: #1b63b1;
}
.flexContainerBox4 {
border-top-color: #dd0000;
color: #dd0000;
}
.flexContainerBox::before {
content: '';
position: absolute;
/* border: 15px solid transparent;*/
border-width: 0 15px 0 15px;
border-style: solid;
border-color: transparent;
border-bottom: 0;
position: absolute;
left: 50%;
top: 0;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.flexContainerBox:hover::before {
border-width: 15px 15px 0 15px;
}
.flexContainerBox1:hover::before {
border-top-color: #15AF04;
}
.flexContainerBox2:hover::before {
border-top-color: #E4A621;
}
.flexContainerBox3:hover::before {
border-top-color: #1b63b1;
}
.flexContainerBox4:hover::before {
border-top-color: #dd0000;
}
.flexContainerBoxTextBox > ul {
list-style:none;
padding: 0;
margin: 0;
}
.flexContainerBoxTextBox > ul > li{
margin-bottom: 10px;
}
.flexContainerBoxTextBox ul li + li::before{
background-color: #ccc;
content: "";
display: block;
height: 1px;
margin: 0 auto;
position: relative;
top: -7px;
left: 0;
width: 22px;
}
.flexContainerBoxTextBox {
text-align: center;
font-size: 1.2em;
font-family: "museo";
}
.flexContainerBoxHeading {
text-align: center;
font-size: 1.9em;
padding: 10px;
margin-bottom: 5px;
}
<div class="indexContainer whiteContainer flexContainer">
<div class="flexContainerBox flexContainerBox1">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
WORLD CLASS <span style="color:#111"><br>FACILITIES</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Day & Boarding</li>
<li>Secondary & Primary</li>
<li>Ages 2 to 18</li>
<li>200 Students </li>
<li>Cambridge IGCSE & GCEs</li>
<li>Beautiful sports facilities</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox2">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
QUALITY <span style="color:#111"><br>EDUCATION</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Over 10 Years Experience in Quality delivery</li>
<li>Good resources for Students</li>
<li>Student Oriented Learning</li>
<li>Good Teaching staff </li>
<li>Conducive Environment</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox3">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
PERSONAL <span style="color:#111"><br>TOUCH</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Small Class Sizes</li>
<li>Low teacher:student Ratio</li>
<li>Maximum contact with teachers</li>
<li>Mentorship programs</li>
<li>Student Counselling</li>
</ul>
</div>
</div>
<div class="flexContainerBox flexContainerBox4">
<div class="flexContainerBoxBorderRight"></div>
<div class="flexContainerBoxHeading">
HOLISTIC <span style="color:#111"><br>APPROACH</span>
</div>
<div class="flexContainerBoxTextBox">
<ul>
<li>Innovative Teaching Methods</li>
<li>Use of Technology in learning</li>
<li>Developing the "whole" child</li>
<li>Nurturing Talents & Gifts</li>
<li>Extra-curricular program</li>
<li>Christ-Centered School</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
对于这个问题的更详细的说明,这里有一个小提琴:https://jsfiddle.net/Lombe/qtkqqhqw/
我看你解决了这个,但问题也在于flex-basis
。没有指定属性,速记flex: 1
将其设置为0%。由于您的物品没有设置width
,因此它会退回到物品内容的计算宽度。
这意味着您的当前项目将缩小到0%。如果您想要一个不需要媒体查询的解决方案,将.flexContainerBox
从flex: 1
更改为flex: 1 1 auto
将在iOS上正确缩放包装。
这可以设置您的基于柔性的基础,或者“柔性项目可以具有的柔量”,以随您的内容自动缩放。
我曾尝试过。我自动设置flex项目的问题是,在某些屏幕宽度下,某些div会比其他div大。此截图说明了http://i.imgur.com/WRbEAnO.png – Lombe
设置项目的“宽度”如何?这种方式的项目有一个最小的宽度之前折断flex。将宽度设置为〜300px,并以flex为基础自动消除不规则大小。 –
JSfiddle在模拟iPhone 6上按预期工作。 – jhpratt
它是从计算机模拟的吗?即使对我来说,当我模拟它时,它也能很好地工作,但当我在实际的手机上尝试时,它只会给我带来问题。我希望我有一个android来测试它,这样我就可以看出它是移动设备的问题,还是只是iOS。 – Lombe
是的,我使用了Chrome模拟器。我没有iPhone,所以我不能在那里检查。我稍后可以在我的Android上检查它,但其他人可能会在那之后进行检查。 – jhpratt