【小程序】常用的样式

可以将以下样式定义在app.wxss文件中，方便随时调用。

卡片样式

.app-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10rpx;
  background-color: #fff;
}
.app-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

Grid（宫格）样式

.grid-content {
  display: flex;  
  flex-direction: row;
  flex-flow: wrap;
  align-content: flex-start;
}

去除按钮背景边框样式

button {
  background: initial;
  padding: 0px;
  line-height: 30rpx;
}

button:focus {
  outline: 0;
}

button::after {
  border: none;
}

常用的flex容器样式

.column-content {
  display: flex;
  flex-direction: column;
}

.row-content {
  display: flex;
  flex-direction: row;
}

.justify-center-content {
  justify-content: center;
}

.align-items-center-content {
  align-items: center;
}

.flex-grow-content {
  display: flex;
  flex-grow: 1;
}