小程序WXSS布局

Posted 2021-01-14 GuGu

1. 尽量采用flex 布局，指定flex-direction是row( 从左到右）还是column （从上到下）

特别要记得写 flex-wrap: wrap; 不然超出屏幕部分不会换行

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:690rpx;

2. 美工设计是按Iphone6, 750px*1334px的尺寸设计。切图的尺寸对应wxss里的rpx， 1rpx=0.5px

3. 容器的图片文字居中

.col3
{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  width:230rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.col3 image{
  margin-left:auto;
  margin-right:auto;
}