移動端佈局的時候關於上下左右居中最好拋棄使用line-height、text-align、padding、margin等調節

使用flex佈局簡單不易錯，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

可以在總樣式自定義一個flex，如下

.x-flex-container {
  　display: flex;
  　align-items: center;                                                           //上下居中
  　justify-content: center;                                                      //左右居中
  　box-sizing: border-box;                                                     //盒子模型
  　width: 100%;
  　　&.r-reverse {
    　　　flex-direction: row-reverse;       //flex-direction屬性決定主軸的方向（即項目的排列方向）四個屬性row、row-reverse、column、column-reverse　　　　}                                                                                     //row：（默認值）主軸為水平方向，起點在左端。
  　　&.c-reverse {　　　　　　　　　　　　　　　　　　 //row-reverse：主軸為水平方向，起點在右端。
    　　　flex-direction: column-reverse;　　　　　　　　　  //column-reverse：主軸為垂直方向，起點在下沿。
  　　}
  　　&.column {
    　　　flex-direction: column;　　　　　　　　　　　　　 //column：主軸為垂直方向，起點在上沿。
  　　}
  　　&.start {
    　　　justify-content: flex-start;　　　　　　　　　　　　 //左對齊（默認值）
  　　}
  　　&.end {
    　　　justify-content: flex-end;　　　　　　　　　　　　  //右對齊
  　　}
  　　&.avg {
    　　　justify-content: space-around;　　　　　　　　　　//每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
  　　}
  　　&.between {
    　　　justify-content: space-between;     　　　　　　　　//兩端對齊，項目之間的間隔都相等。
  　　}
  　　&.evenly {
    　　　justify-content: space-evenly;
  　　}
  　　&.wrap {
    　　　flex-wrap: wrap;　　 //默認情況下，項目都排在一條線上。flex-wrap定義，如果一條軸線排不下如何換行。wrap：換行，第一行在上方。
  　　}
  　　> .x-flex-a {
    　　　flex: auto;
    　　　width: 10px;
  　　}
}

如此一來就可以在需要的地方加上自定義的class便實現了大部分的上下左右居中和對齊

 

（另外，續昨天的引iconfont隨筆加一些內容



  • 小程序中圖標最好不要用 icon 標籤，用 text 標籤，因為 icon 有默認高度，有時候在其他類型手機屏幕會有位置偏移的現象，用 text 標籤只需要設置圖標的 font-size 就可以啦，親測使用 icon 標籤的時候在ip5下位置發生偏移了