在你提到我之类的其他问题之前，我已经看过他们，尝试过他们的解决方案而且他们不适合我。
我的问题在于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>
答案 0 :(得分：0)
将其添加到标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
答案 1 :(得分：0)
我看到你解决了这个问题，但问题还在于flex: 1。如果不指定属性，速记width会将其设置为0％。由于您的商品没有设置.flexContainerBox，因此它会回退到商品内容的计算宽度。
这意味着您当前的项目将缩小为0％。如果您想要一个不需要媒体查询的解决方案，那么将flex: 1从flex: 1 1 auto更改为index会在iOS上正确缩放包装。
这会设置您的弹性基础，或者＆＃34;弹性项目可以具有的弯曲量，并随着您的内容自动缩放。