小程序 | 微信小程序布局左对齐自动换行

在这里插入图片描述

/* 快捷按钮容器 */
.shortcutContainer {
    
    
  width: 100%;
  /* 子容器水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 快捷按钮框架 */
.shortcutFrame {
    
    
  width: 93%;
  /* border: 1rpx solid red; */
}
/* 快捷按钮 */
.shortcutButton {
    
    
  width: 20%;
  padding: 15rpx;
  /* 本容器相对定位左对齐 */
  float: left;
  position: relative;
  /* 子容器水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1rpx solid blue; */
}
/* 快捷按钮-图片 */
.shortcutButton image {
    
    
  width: 130rpx;
  height: 130rpx;
  border: 1rpx solid #dddee1;
  border-radius: 50%;
}
/* 快捷按钮-文字 */
.shortcutButton text {
    
    
  margin-top: 15rpx;
  font-size: medium;
  color: #80848f;
}

猜你喜欢

转载自blog.csdn.net/weixin_44421798/article/details/113930629