移動端布局技巧

標籤：etc   目的   nowrap   空白   line   sel   溢出   end   idt   

1、移動端盡量使用彈性布局：

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：換行

2、height盡量不要用百分比

3、margin-top、margin-bottom不要用百分比，如果實際需求需要，用絕對位置和相對定位代替

4、如果不知道用什麼標籤，全部用div代替

5、如果需要相容ie9瀏覽器必須用float:left。

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

 

移動端布局技巧