前端布局中让子元素横向排列并自动换行

1.知识点

• 有一个需求，就是页面有一个功能菜单区域，想实现根据不同的用户类型，展现不同的菜单入口，菜单的个数是不统一的，因此，想尝试是否有简单的前端实现方法。如下图所示：

2.原理

• 我们可以使用 flex 布局来实现这个需求，同时，需要设置子元素的宽度为 33%，这样才能撑满一行，促使换行：

.line{	display: flex;	flex-wrap:wrap;}

• 上面的方案，带来的一个问题是当页面第二行少于 3 个的时候，子元素 4 和子元素 5 不会自动对其子元素 1 和子元素 2，这样体验相当不好。经过排查，是由于添加了 space-around 导致的，把它去除之后，就可以实现子元素 4 和子元素 5 与第一行的子元素 1 和子元素 2 自动对其的效果了。

• 还有一个小问题，就是换行之后，第一行与第二行之间的间隙很窄，几乎是靠在一起的。体验也是比较差的，可以通过给子元素添加 margin 来解决，如下图的源码。

3.最终解决方案

.line{		width: 100%;		height: auto;		display: flex;		flex-wrap: wrap;		flex-direction: row;		align-items: center;  	// justify-content: space-around;	}.item{  display: flex;  width: 33.3%;  flex-direction: column;  justify-content: flex-start;  align-items: center;  margin-bottom: 20rpx;}