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

小程序 | 微信小程序布局左对齐自动换行_第1张图片

/* 快捷按钮容器 */
.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;
}

你可能感兴趣的:(小程序,小程序,定位,wxss,wxml)