flex布局 一行显示两个同宽、高的盒子 并 可以换行

 

 小程序移动端项目，布局为每行两个元素，每列无限制

通过flex设置弹性布局

思路：

1. 父元素设置flex布局，宽度100% ，并允许换行

2. 子元素通过 min-width规定，最小宽度，这样盒子就不能一直弹性的缩小下去了，就会产生换行的效果，记得设置flex1

 <View className="px-sm pb-sm">
        <View className="flex my-sm appointment-center-img flex-wrap justify-start w-full">
          {appFunction?.Shortcut001?.children?.map((item, index) => {
            return (
              <View
                key={index}
                className={`flex-1 bg-white rounded-md p-sm ${
                  index % 2 == 0 && 'mr-sm'
                } relative z-0 ${index > 1 && 'mt-sm'}`}
                onClick={() => handelToItem(item)}
                style={{
                /*// 我这里一行显示2个 所以是/2  一行显示几个就除以几*/
                 /*// 这里的62px = (分布个数2-1)*间隙62px, 可以根据实际的分布个数和间隙区调整*/
                  minWidth: 'calc((100% - 62px) / 2)',
                }}
              >
                <View>
                  <View className="font-bold text-base">{item.functionTitle}</View>
                  <View className="text-xxs mt-2 text-secondary">{item.functionDesc}</View>
                  <Image
                    className=" absolute right-5 bottom-5 w-20 h-20 -z-1"
                    src={item.functionIcon}
                  />
                </View>
              </View>
            )
          })}
        </View>
      </View>