一篇超好用的css

.flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.flex-row{
    flex-direction: row; /* 水平排列（默认） */
}
.flex-col{
    flex-direction: column;
}
.flex-row-reverse {
  flex-direction: row-reverse; /* 反向水平排列 */
}

.flex-col-reverse {
  flex-direction: column-reverse; /* 反向垂直排列 */
}
.flex-wrap {
  flex-wrap: wrap; /* 允许换行 */
}

.flex-nowrap {
  flex-wrap: nowrap; /* 不换行（默认） */
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse; /* 反向换行 */
}
.justify-start {
  justify-content: flex-start; /* 起始对齐（默认） */
}

.justify-end {
  justify-content: flex-end; /* 末端对齐 */
}

.justify-center {
  justify-content: center; /* 居中对齐 */
}

.justify-between {
  justify-content: space-between; /* 两端对齐 */
}

.justify-around {
  justify-content: space-around; /* 周围留白 */
}

.justify-evenly {
  justify-content: space-evenly; /* 均匀分布 */
}
.items-start {
  align-items: flex-start; /* 起始对齐 */
}

.items-end {
  align-items: flex-end; /* 末端对齐 */
}

.items-center {
  align-items: center; /* 居中对齐 */
}

.items-baseline {
  align-items: baseline; /* 基线对齐 */
}

.items-stretch {
  align-items: stretch; /* 拉伸填满（默认） */
}
.flex-grow {
  flex-grow: 1; /* 允许扩展 */
}

.flex-grow-0 {
  flex-grow: 0; /* 禁止扩展 */
}
.flex-basis-auto {
  flex-basis: auto; /* 默认 */
}

.flex-basis-0 {
  flex-basis: 0;
}

.flex-basis-full {
  flex-basis: 100%;
}
.flex-1 {
  flex: 1 1 0%; /* 等分剩余空间 */
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto; /* 初始值 */
}

.flex-none {
  flex: none; /* 不伸缩 */
}
.self-auto {
  align-self: auto; /* 默认 */
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}
/* 快捷居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 间距 */
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gap-1{
    gap: 4rpx; /* 项目间距 */
}
.gap-4 {
  gap: 16rpx; /* 项目间距 */
}

.gap-x-2 {
  column-gap: 8rpx; /* 水平间距 */
}

.gap-y-3 {
  row-gap: 12rpx; /* 垂直间距 */
}
.w-100{
  width: 100%;
  box-sizing: border-box;
}
.pd-10{
  padding: 10rpx;
}
.pd-20{
  padding: 20rpx;
}
.pd-30{
  padding: 30rpx;
}
.pd-40{
  padding: 40rpx;
}
.pl-10{
  padding-left: 10rpx;
}
.pl-20{
  padding-left: 20rpx;
}
.pl-30{
  padding-left: 30rpx;
}
.pl-40{
  padding-left: 40rpx;
}
.pr-10{
  padding-right: 10rpx;
}
.pr-20{
  padding-right: 20rpx;
}
.pr-30{
  padding-right: 30rpx;
}
.pr-40{
  padding-right: 40rpx;
}
.pt-10{
  padding-top: 10rpx;
}
.pt-20{
  padding-top: 20rpx;
}
.pt-30{
  padding-top: 30rpx;
}
.pt-40{
  padding-top: 40rpx;
}

.mb-10{
  margin-bottom: 10rpx;
}
.mb-20{
  margin-bottom: 20rpx;
}
.mb-30{
  margin-bottom: 30rpx;
}
.mb-40{
  margin-bottom: 40rpx;
}
.ml-10{
  margin-left: 10rpx;
}
.ml-20{
  margin-left: 20rpx;
}
.ml-30{
  margin-left: 30rpx;
}
.ml-40{
  margin-left: 40rpx;
}
.mr-10{
  margin-right: 10rpx;
}
.mr-20{
  margin-right: 20rpx;
}
.mr-30{
  margin-right: 30rpx;
}
.mr-40{
  margin-right: 40rpx;
}
.mt-10{
  margin-top: 10rpx;
}
.mt-20{
  margin-top: 20rpx;
}
.mt-30{
  margin-top: 30rpx;
}
.mt-40{
  margin-top: 40rpx;
}