/* ====================================
   Flex 容器属性 (父元素)
   ==================================== */

/* 1. display: 定义flex容器 */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* 2. flex-direction: 主轴方向 */
.flex-row {
  flex-direction: row;              /* 默认：水平从左到右 */
}

.flex-row-reverse {
  flex-direction: row-reverse;      /* 水平从右到左 */
}

.flex-col {
  flex-direction: column;           /* 垂直从上到下 */
}

.flex-col-reverse {
  flex-direction: column-reverse;   /* 垂直从下到上 */
}

/* 3. flex-wrap: 换行方式 */
.flex-wrap {
  flex-wrap: wrap;                  /* 换行 */
}

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

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;          /* 反向换行 */
}

/* 4. justify-content: 主轴对齐方式 */
.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;    /* 项目间距完全相等 */
}

/* 5. align-items: 交叉轴对齐方式（单行） */
.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;             /* 拉伸填充（默认） */
}

/* 6. align-content: 交叉轴对齐方式（多行） */
.content-start {
  align-content: flex-start;        /* 起始对齐 */
}

.content-end {
  align-content: flex-end;          /* 末尾对齐 */
}

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

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

.content-around {
  align-content: space-around;      /* 两侧间距相等 */
}

.content-stretch {
  align-content: stretch;           /* 拉伸填充（默认） */
}

/* 7. gap: 间距（推荐使用） */
.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-5 {
  gap: 20px;
}

.gap-6 {
  gap: 24px;
}

.gap-8 {
  gap: 32px;
}

.gap-10 {
  gap: 40px;
}

/* 行列分别设置 */
.gap-x-2 {
  column-gap: 8px;
}

.gap-y-2 {
  row-gap: 8px;
}


/* ====================================
   Flex 项目属性 (子元素)
   ==================================== */

/* 8. order: 排序 */
.order-first {
  order: -9999;                     /* 排在最前 */
}

.order-last {
  order: 9999;                      /* 排在最后 */
}

.order-0 {
  order: 0;                         /* 默认顺序 */
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

/* 9. flex-grow: 放大比例 */
.grow-0 {
  flex-grow: 0;                     /* 不放大（默认） */
}

.grow-1 {
  flex-grow: 1;                     /* 等分剩余空间 */
}

.grow-2 {
  flex-grow: 2;                     /* 占用2份剩余空间 */
}

.grow-3 {
  flex-grow: 3;
}

/* 10. flex-shrink: 缩小比例 */
.shrink-0 {
  flex-shrink: 0;                   /* 不缩小 */
}

.shrink-1 {
  flex-shrink: 1;                   /* 可缩小（默认） */
}

.shrink-2 {
  flex-shrink: 2;                   /* 更容易缩小 */
}

/* 11. flex-basis: 初始大小 */
.basis-auto {
  flex-basis: auto;                 /* 自动（默认） */
}

.basis-0 {
  flex-basis: 0;                    /* 0基准，配合grow使用 */
}

.basis-full {
  flex-basis: 100%;                 /* 占满整行 */
}

.basis-50 {
  flex-basis: 50%;
}

.basis-33 {
  flex-basis: 33.333%;
}

.basis-25 {
  flex-basis: 25%;
}

/* 固定像素值 */
.basis-100 {
  flex-basis: 100px;
}

.basis-200 {
  flex-basis: 200px;
}

.basis-300 {
  flex-basis: 300px;
}

/* 12. align-self: 单个项目对齐方式（覆盖容器align-items） */
.self-auto {
  align-self: auto;                 /* 继承容器设置（默认） */
}

.self-start {
  align-self: flex-start;           /* 起始对齐 */
}

.self-end {
  align-self: flex-end;             /* 末尾对齐 */
}

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

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

.self-stretch {
  align-self: stretch;              /* 拉伸填充 */
}


/* ====================================
   常用组合快捷类 (高频场景)
   ==================================== */

/* 水平居中布局 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 水平两端对齐，垂直居中 */
.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 水平等分布局 */
.flex-equal > * {
  flex: 1 1 0;                      /* 所有子元素等宽 */
}

/* 垂直居中布局 */
.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 右侧按钮组 */
.flex-right {
  display: flex;
  justify-content: flex-end;
}

/* 底部固定 */
.flex-col-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* ====================================
   Flex 简写属性 (flex)
   ==================================== */

/* flex: none - 固定大小，不伸缩 */
.flex-none {
  flex: none;                       /* 相当于: 0 0 auto */
}

/* flex: 1 - 等分剩余空间（最常用） */
.flex-1 {
  flex: 1 1 0;                      /* 相当于: 1 1 0 */
}

/* flex: auto - 基于内容大小分配 */
.flex-auto {
  flex: 1 1 auto;                   /* 相当于: 1 1 auto */
}

/* flex: initial - 默认值 */
.flex-initial {
  flex: 0 1 auto;                   /* 相当于: 0 1 auto（默认） */
}

/* 固定比例 */
.flex-2 {
  flex: 2 1 0;                      /* 占用2份空间 */
}

.flex-3 {
  flex: 3 1 0;                      /* 占用3份空间 */
}