Flex布局新写法兼容写法详解

很久之前用过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;
}