ul{display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */display: -webkit-flex;
}
li{flex:1 0 auto;-webkit-flex:1 0 auto; 合并写法，不缩放宽度 flex-shink = 0
}

//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;
}