微信小程序中通过flex实现网格布局(二)

最新推荐文章于 2024-08-26 12:03:12 发布

Mr_Tony

最新推荐文章于 2024-08-26 12:03:12 发布

阅读量863

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Mr_Tony/article/details/99209464

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

效果图：
在这里插入图片描述

<view class="flex_container">
  <view class="flex_item" wx:for='abcdef'>{{item}}</view>
</view>

.flex_container{
  display: flex;
  /** 一行放不下时候换行，默认不换行，然后控件会进行缩放进一行内,因为
  flex-shrink默认为0，否则会溢出边框 */
  flex-flow: wrap;/** 一行放不下时进行换行 */
  justify-content: center;/** 设置子项目的水平排列方式 */
}
.flex_item{
  width: 100px;
  height: 100px;
  margin: 5rpx;/** 外边距合并，所以垂直间距=水平间距 */
  display: flex;
  background-color: orchid;
  justify-content: center;
  align-items: center;
}