很久之前用过flex，但是没有考虑过兼容性问题，为了兼容ios一定要加上-webkit前缀：
ul{
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-flex;
}
li{
flex:1 0 auto;
-webkit-flex:1 0 auto; 合并写法，不缩放宽度 flex-shink = 0
}
注意：用过flex布局后，子元素的float,position都没有效了
flex布局教程参考网址，非常有用：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
实例1：
//html
<div class="more-secret">
<h2>更多星球奥秘，等你来探索！</h2>
<div class="more-wrap">
<ul class="fix">
<li>
<h3>高手过招</h3>
<div class="pic"><img src="/images/land/gaoshou.jpg?v=1.0" alt=""></div>
<p class="text">更多理财活动，拼人品！</p>
</li>
<li>
<h3>组建专属战队</h3>
<div class="pic"><img src="/images/land/juntuan.jpg?v=1.0" alt=""></div>
<p class="text">邀好友三五成军，赚赏金！</p>
</li>
<li>
<h3>会员专享</h3>
<div class="pic"><img src="/images/land/huiyuan.jpg?v=1.0" alt=""></div>
<p class="text">会员权益享不停，不差钱！</p>
</li>
</ul>
</div>
</div>
//css
.more-secret {
width: 100%;
padding: 0 0 0.52rem 0;
/* background-color: #200c41; */
}
.more-secret h2 {
color: #fefe00;
font-weight: 700;
font-size: 0.6rem;
line-height: 1;
text-align: center;
text-shadow: inset 0 2px 2px #594709;
margin-bottom: 0.56rem;
padding-top: 0.853333rem;
}
.more-secret .more-wrap {
width: 10rem;
overflow-y: hidden; //最外面加上overflow:auto哦
}
.more-secret .more-wrap ul {
display: -webkit-box;
display: flex;
display: -webkit-flex;
padding: 0 0.386667rem;
width: 21.23rem; //宽度一定要写，ios下不写宽度会导致前面的内容遮挡
}
.fix:after, .fix:before {
display: block;
content: "clear";
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.more-secret ul li {
-webkit-box-flex: 1;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
display: inline-block;
width: 6.693333rem;
height: 6.48rem;
background-color: rgba(255,255,255,.1);
border: 1px solid #765f9c;
border-radius: 0.106667rem;
margin-right: 0.386667rem;
text-align: center;
padding: 0 0.24rem;
}
.more-secret ul li h3 {
font-size: 0.426667rem;
color: #fedc48;
line-height: 1;
padding: 0.466667rem 0 0.333333rem 0;
}
.more-secret ul li div.pic {
width: 100%;
height: 3.973333rem;
background-color: #62438d;
border-radius: 0.053333rem;
}
.more-secret ul li p.text {
padding-top: 0.373333rem;
color: #fff;
font-size: 0.373333rem;
}