问题
I'm trying to troubleshoot a page that was created by someone else, and have never used flexbox before. It is a 3-column layout that stacks perfectly in when resized in Firefox or Chrome but when viewing in Safari on desktop or iPhone the elements don't stack. The first one seems to get hidden under the second, and the third remains to the right, outside of the content area. I found a similar topic and added the viewport code in the head but it still doesn't work. I've tried several different things but nothing seems to change it. I'm sure there's something really simple I'm overlooking because the code is a bit of a mess and I'm not familiar with flexbox.
Page can be viewed at: http://www.mapi.com/doshas/vpk-balance.html
Here's the CSS and HTML for the page:
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@-viewport {
width: device-width;
}
.doshas {
color: white;
text-shadow: .8px .8px #AAAAAA;
width: 90px;
height: 45px;
text-align: center;
box-shadow: 4px 4px 10px #646464;
font-size: .8em;
float: left;
clear: both;
margin-left: 35%;
}
#vataProd,
#pittaProd,
#kaphaProd {
margin-top: 40px;
margin-bottom: 12%;
}
#vataProd {
background-color: #7FB122;
}
#pittaProd {
background-color: #226CB1;
}
#kaphaProd {
background-color: #D44F00;
}
.vataBox,
.pittaBox,
.kaphaBox {
box-shadow: 4px 4px 10px #646464;
margin-top: 6%;
padding: 3%;
height: 470px;
width: 240px;
margin-left: 20px;
}
.vataBox2,
.pittaBox2,
.kaphaBox2 {
box-shadow: 4px 4px 10px #646464;
margin-top: 220px;
padding: 3%;
height: 130px;
width: 240px;
margin-left: 20px;
}
.vataBox,
.vataBox2 {
background-color: #a5cf32;
list-style-position: inside;
}
.pittaBox,
.pittaBox2 {
background-color: #6ca8e7;
list-style-position: inside;
}
.kaphaBox,
.kaphaBox2 {
background-color: #f28f25;
list-style-position: inside;
}
.doshaProducts {
float: left;
display: block;
clear: both;
}
#content {
padding: 0;
}
#flexBox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
}
#flexVata,
#flexPitta,
#flexKapha {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background-repeat: no-repeat;
min-width: 300px;
max-width: 300px;
}
#flexVata {
background-image: url("/doshas/images/vata-background.jpg");
margin: auto;
order: 1;
}
#flexPitta {
background-image: url("/doshas/images/pitta-background.jpg");
margin: auto;
order: 2;
}
#flexKapha {
background-image: url("/doshas/images/kapha-background.jpg");
margin: auto;
order: 3;
}
#flexVata img,
#flexPitta img,
#flexKapha img {
margin-left: auto;
margin-right: auto;
}
#header {
color: #7FB122;
text-align: center;
font-weight: normal;
font-size: 1.5em;
}
#footer {
color: #646464;
text-align: center;
font-weight: normal;
font-size: 1.5em;
clear: both;
}
.grayBox {
background-color: #707070;
color: white;
font-size: .8em;
text-align: center;
padding: .1% 2% .5% 2%;
border-radius: 25px;
margin-left: 1%;
}
@media screen and (max-width: 780px) {}
}
#doshaQuiz {
visibility:hidden;
}
#flexBox div div ul li {
list-style-type: disc;
margin-left: 3%;
margin-right: 3%;
}
.vataBox h3,
.pittaBox h3,
.kaphaBox h3 {
color: white;
margin-left: 10%;
font-size: .9em;
}
.vataBox ul li,
.pittaBox ul li,
.kaphaBox ul li {
font-size: .8em;
line-height: 1.3em;
}
.vataBox2 h3,
.pittaBox2 h3,
.kaphaBox2 h3 {
color: white;
margin-left: 10%;
font-size: .9em;
}
.vataBox2 ul li,
.pittaBox2 ul li,
.kaphaBox2 ul li {
font-size: .8em;
line-height: 1.3em;
}
#pitta-out {
-webkit-margin-before: 2.2em;
}
#kapha-out {
-webkit-margin-before: 3.4em;
}<!DOCTYPE html>
<html>
<head>
<title>vpk® Balance | Maharishi Ayurveda Products</title>
<meta name="description" content="DESCRIPTION.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%=include( '/template_assets/styleSheets_js.html')%>
</head>
<body>
<%=include( '/template_assets/googleAnalytics.html')%>
<%=include( '/template_assets/page_head.html')%>
<div id="outerWrapper" class="cf">
<div id="content" class="cf">
<h2 id="header">YOU ARE A UNIQUE COMBINATION OF ALL 3</h2>
<h2 id="footer">WHAT’S MY DOSHA? <a href="/doshas/vpk-explanation.html"><span class="grayBox">dosha quiz</span></a></h2>
<div id="flexBox">
<div id="flexVata">
<div class="vataBox2">
<ul>
<li>thin build</li>
<li>does not gain weight easily</li>
<li>quick to learn, quick to forget</li>
<li>enthusiastic & vivacious</li>
<li>becomes cold easily</li>
</ul>
</div>
<div class="vataBox">
<h3>vata in balance:</h3>
<ul>
<li>energetic... vivacious</li>
<li>learns easily</li>
<li>clear & alert mind</li>
<li>falls asleep easily at bedtime</li>
<li>balanced digestion & elimination</li>
<li>good circulation & even body temperature</li>
</ul>
<h3>vata out of balance:</h3>
<ul>
<li>tired and/or fatigued</li>
<li>forgetful, or “spaced out”</li>
<li>lack of focus</li>
<li>difficulty falling asleep</li>
<li>occasional constipation</li>
<li>poor circulation (cold feet & hands)</li>
<li>feelings of anxiousness & worry</li>
</ul>
</div>
<a href="/doshas/vata-dosha.html">
<div class="doshas" id="vataProd">vata
<br>products</div>
</a>
</div>
<!-- #flexVata -->
<div id="flexPitta">
<div class="pittaBox2">
<ul>
<li>medium build</li>
<li>balanced weight</li>
<li>sharp intellect</li>
<li>goal oriented</li>
<li>becomes hot easily</li>
</ul>
</div>
<div class="pittaBox">
<h3>pitta in balance:</h3>
<ul>
<li>perfectionist (type A personality)</li>
<li>strong intellect</li>
<li>strong digestion</li>
<li>radiant, glowing skin</li>
<li>sleeps through the night</li>
<li>inner peace & happiness</li>
</ul>
<h3 id="pitta-out">pitta out of balance:</h3>
<ul>
<li>controlling, fiery personality</li>
<li>workaholic tendencies</li>
<li>overheated, excess stomach acid</li>
<li>skin rashes & acne</li>
<li>interrupted sleep</li>
<li>loose bowel movements</li>
</ul>
</div>
<a href="/doshas/pitta-dosha.html">
<div class="doshas" id="pittaProd">pitta
<br>products</div>
</a>
</div>
<!-- #flexPitta -->
<div id="flexKapha">
<div class="kaphaBox2">
<ul>
<li>larger build</li>
<li>tendency for weight gain</li>
<li>slow to learn, slow to forget</li>
<li>sweet & even tempered</li>
<li>tends to dislike cold & damp weather</li>
</ul>
</div>
<div class="kaphaBox">
<h3>kapha in balance:</h3>
<ul>
<li>stable temperament</li>
<li>good long-term memory</li>
<li>healthy robust physiology</li>
<li>strength & stamina</li>
<li>compassionate & affectionate</li>
<li>sound sleep</li>
</ul>
<h3 id="kapha-out">kapha out of balance:</h3>
<ul>
<li>gains weight easily</li>
<li>sluggish digestion</li>
<li>prone to sinus & respiratory issues</li>
<li>lethargy</li>
<li>feelings of sadness</li>
<li>difficulty waking up</li>
<li>food cravings</li>
</ul>
</div>
<a href="/doshas/kapha-dosha.html">
<div class="doshas" id="kaphaProd">kapha
<br>products</div>
</a>
</div>
<!-- #flexKapha -->
</div>
<!-- #flexBox -->
</div>
<!--end #content -->
</div>
<!--end #outerWrapper -->
<%=include( '/template_assets/footer.html')%>
</body>
</html>Any help on this is greatly appreciated; thank you for your time!
来源：https://stackoverflow.com/questions/27634203/flexbox-columns-stacking-in-mobile-width-in-firefox-chrome-but-not-safari-desk