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