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/

+0

JSfiddle在模拟iPhone 6上按预期工作。 – jhpratt

+0

它是从计算机模拟的吗?即使对我来说,当我模拟它时,它也能很好地工作,但当我在实际的手机上尝试时,它只会给我带来问题。我希望我有一个android来测试它,这样我就可以看出它是移动设备的问题,还是只是iOS。 – Lombe

+0

是的,我使用了Chrome模拟器。我没有iPhone,所以我不能在那里检查。我稍后可以在我的Android上检查它,但其他人可能会在那之后进行检查。 – jhpratt

一下添加到标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+0

嘿,我已经添加到我的

部分。其他解决方案? – Lombe
+0

我不确定,但您是否尝试过使用媒体查询将Flex方向更改为列? – wpalmes

+0

我会试试 – Lombe

我看你解决了这个,但问题也在于flex-basis。没有指定属性,速记flex: 1将其设置为0%。由于您的物品没有设置width,因此它会退回到物品内容的计算宽度。

这意味着您的当前项目将缩小到0%。如果您想要一个不需要媒体查询的解决方案,将.flexContainerBoxflex: 1更改为flex: 1 1 auto将在iOS上正确缩放包装。

这可以设置您的基于柔性的基础,或者“柔性项目可以具有的柔量”,以随您的内容自动缩放。

+0

我曾尝试过。我自动设置flex项目的问题是,在某些屏幕宽度下,某些div会比其他div大。此截图说明了http://i.imgur.com/WRbEAnO.png – Lombe

+0

设置项目的“宽度”如何?这种方式的项目有一个最小的宽度之前折断flex。将宽度设置为〜300px,并以flex为基础自动消除不规则大小。 –