移動端佈局技巧

一、移動端儘可能使用彈性佈局：

display:flex;display:-webkit-flex;

justify-content: space-between;-webkit-justify-content: space-between;(水平)

flex-start：默認值。項目位於容器的開頭。
flex-end：項目位於容器的結尾。
center：項目位於容器的中心。（經常使用）
space-between：項目位於各行之間留有空白的容器內。（經常使用）
space-around：項目位於各行以前、之間、以後都留有空白的容器內。

align-items: center;-webkit-align-items: center;（垂直）

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）（經常使用）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

flex-wrap:wrap;-webkit-flex-wrap:wrap;

flex-wrap:自動換行
nowrap：不換行
wrap：換行

二、height儘可能不要用百分比

三、margin-top、margin-bottom不要用百分比，若是實際需求須要，用絕對定位和相對定位代替

四、若是不知道用什麼標籤，所有用div代替

五、若是須要兼容ie9瀏覽器必須用float:left。

float佈局教程地址：http://study.163.com/course/introduction.htm?courseId=1005118030