如上图,实现类似安卓中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;(就是里面内容不换行。则后面再跟的内容在后面显示不会换行。)则会一个一个往后放。
如果思路二和思路三遇到问题,则记得清浮动。 清楚父布局浮动