1
在您將其他問題（如我的）引薦給我之前，我已經瀏覽了他們，嘗試了他們的解決方案，但他們並不適合我。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/
JSfiddle在模擬iPhone 6上按預期工作。 – jhpratt
它是從計算機模擬的嗎？即使對我來說，當我模擬它時，它也能很好地工作，但當我在實際的手機上嘗試時，它只會給我帶來問題。我希望我有一個android來測試它，這樣我就可以看出它是移動設備的問題，還是隻是iOS。 – Lombe
是的，我使用了Chrome模擬器。我沒有iPhone，所以我不能在那裏檢查。我稍後可以在我的Android上檢查它，但其他人可能會在那之後進行檢查。 – jhpratt