響應式設計手機端flex的用法

---恢復內容開始---

今天總結一下flexbox的用法

它用於受極端的響應式佈局，前面涉及的css和html知識再也不多說，meta標籤必定記住！<meta name="viewport",content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no；"。

這其中有一個很是好的垂直水平居中方式，之前咱們講水平垂直居中，一般會用到這個,這個是針對於子元素，這兩種對於那種左邊是圖片，垂直居中簡直不要太好用！：

.main{

　　position:absolute;

　　top:50%;

　　left:50%;

　　-webkit-transform:translate(-50%,-50%);

}

有了flex以後，咱們就能夠這樣作了,注意下面這個要對父元素使用，他保證的是子元素：

.main{

　　justify-content:center;

　　align-items:center;

　　display:-webkit-flex;

}

可是若是趕上的是左邊是圖片，右邊是文字的呢？想讓他一直佔一樣的比例，怎麼辦咧？有辦法！

diaplay:-webkit-flex;  父元素

flex:1 ;   子元素     數值多大就是佔多少份！

更多詳請要看flex了！

flex-wrap: nowrap;

上面這個屬性是設置換不換行，好比你的父元素是400px，而各個子元素相加一塊兒大於400px；若是不換行，他就會計算你子元素的比例，而將父元素按比例分，可是若是設置了換行，就會按照子元素原來的大小進行佈局，最後不足的時候換行在下一部分，可是第一行的後面會留有父元素剩下的寬度！

 

 

---恢復內容結束---