微信小程序 — css实现类似android中的gridview的效果

                          

 

 如上图，实现类似安卓中gridview的效果。

实现思路一：设置flex布局，然后方向是横向，可以换行

设置每个item的宽度。和空白区域的宽度。正好2个item可以占满屏幕。等第三个的时候就会换行排列

.rowFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  align-content: flex-start;
}

 实现思路二：

设置宽度和高度。然后每个item设置好宽高。然后设置每个item的float:left。 则一行一行的往后放。放不下，就换行了。

实现思路三：

可以设置item父布局display:inline;(就是里面内容不换行。则后面再跟的内容在后面显示不会换行。)则会一个一个往后放。

如果思路二和思路三遇到问题，则记得清浮动。 清楚父布局浮动