Flexbox 弹性布局详解

/* 方法1：justify-content + align-items（最常用） */
.center-container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
  height: 100vh;
}

/* 方法2：使用 margin: auto，让子元素吃掉四周空间 */
.center-container {
  display: flex;
  height: 100vh;
}
.center-item {
  margin: auto; /* Flex 上下文里 auto 会均分四周空间 */
}

/* 方法3：place-content 简写（同时管主轴和交叉轴） */
.center-container {
  display: flex;
  place-content: center; /* = align-content + justify-content */
  align-items: center;
  height: 100vh;
}

.container {
  display: flex;
  height: 100vh;
}

.sidebar-left {
  width: 200px;
  flex-shrink: 0; /* 关键：防止空间不足时被压缩 */
  background-color: #f5f5f5;
}

.main-content {
  flex: 1; /* flex-grow:1, flex-shrink:1, flex-basis:0% —— 吃掉所有剩余空间 */
  background-color: #fff;
}

.sidebar-right {
  width: 250px;
  flex-shrink: 0;
  background-color: #f5f5f5;
}

/* 响应式：小屏幕时改为纵向单列 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar-left,
  .sidebar-right {
    width: 100%;
  }
}

.card-container {
  display: flex;
  gap: 20px; /* 现代浏览器推荐用 gap 代替 margin */
}

.card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ddd;
  /* align-items 默认 stretch，所以即使内容不等长，卡片也会自动等高 */
  display: flex;
  flex-direction: column;
}

.card__body {
  flex: 1; /* 让正文撑开，把按钮压到卡片底部 */
}

.card__footer {
  margin-top: auto; /* 底部对齐的另一种写法 */
}

.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.navbar__logo {
  font-weight: bold;
}

.navbar__menu {
  display: flex;
  gap: 24px;
  margin-left: auto; /* 把菜单整体推到最右边，等价于 justify 分组 */
}

.tag-list {
  display: flex;
  flex-wrap: wrap;      /* 允许换行 */
  gap: 8px 12px;        /* 行间距8px，列间距12px */
  align-content: flex-start;
}

.tag {
  flex: 0 0 auto;       /* 标签保持内容宽度，不伸不缩 */
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef2ff;
}

.ratio-container {
  display: flex;
}
.col-a { flex-grow: 1; } /* 分得 1/6 剩余空间 */
.col-b { flex-grow: 2; } /* 分得 2/6 剩余空间 */
.col-c { flex-grow: 3; } /* 分得 3/6 剩余空间 */

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.product-card {
  /* 基准宽度 240px，可放大占满整行剩余空间，也可缩小但不小于内容 */
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.product-card__img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.product-card__info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1; /* 撑满剩余高度，把按钮顶到底部 */
}

.product-card__title {
  flex: 1; /* 标题区域可伸缩，保证不同标题长度下按钮对齐 */
}

.product-card__buy {
  margin-top: 12px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 关键：撑满视口高度 */
}

.page__header,
.page__footer {
  flex: 0 0 auto; /* 头尾按内容高度，不伸不缩 */
}

.page__main {
  flex: 1; /* 主内容吃掉剩余高度，footer 永远贴底（sticky footer） */
}

.search-bar {
  display: flex;
  gap: 8px;
}

.search-bar__input {
  flex: 1;       /* 输入框占满剩余宽度 */
  min-width: 0;  /* 防止长 placeholder 撑破布局 */
}

.search-bar__btn {
  flex: 0 0 auto; /* 按钮保持自身宽度 */
}

.media {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.media__avatar {
  flex: 0 0 48px; /* 头像固定 48px，绝不缩放 */
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.media__body {
  flex: 1;
  min-width: 0; /* 允许长文本换行而非溢出 */
}

.toolbar { display: flex; }

.toolbar__primary { order: 1; }
.toolbar__secondary { order: 2; }

/* 小屏时把主操作按钮排到最前，无需改动 DOM 结构 */
@media (max-width: 600px) {
  .toolbar__primary { order: 0; }
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.form-row .field {
  flex: 1 1 240px; /* 宽屏并排，窄屏自动换行独占一行 */
}

/* 演示：三列不同 grow，剩余空间按 1:2:3 分配 */
.grow-demo { display: flex; width: 600px; }
.grow-demo > * { flex-basis: 100px; }
.grow-demo .a { flex-grow: 1; }
.grow-demo .b { flex-grow: 2; }
.grow-demo .c { flex-grow: 3; }

/* 旧写法：margin 有首尾多余间距，需额外清除 */
.old-spacing > .item { margin-right: 16px; }
.old-spacing > .item:last-child { margin-right: 0; } /* 多此一举 */

/* 新写法：gap 只在项目间生成间距 */
.new-spacing {
  display: flex;
  gap: 16px; /* 干净利落 */
}

/* gap 支持行/列双值：行间距 8px，列间距 24px */
.wrap-spacing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 第 3 个按钮之前插入弹性空隙，把它和后面的推到最右 */
.toolbar .spacer-before {
  margin-left: auto;
}

/* 常见：logo 左、主菜单居中、用户区右 */
.header { display: flex; align-items: center; }
.header .menu { margin: 0 auto; } /* 左右 auto 使其居中 */

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;       /* 放不下就换行 */
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}

/* 按钮组之间用细分隔线，用 flex 项目实现 */
.editor-toolbar .divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: #eee;
  margin: 0 4px;
}

/* 把「保存 / 发布」这组主操作推到最右 */
.editor-toolbar .actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* 极窄屏：主操作也换行并占满整行 */
@media (max-width: 480px) {
  .editor-toolbar .actions {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}

.multi-line {
  display: flex;
  flex-wrap: wrap;
  height: 400px;      /* 容器比内容高，才有多行分布空间 */
  gap: 12px;
  align-items: flex-start;      /* 每行内部：顶对齐 */
  align-content: space-between; /* 多行整体：上下贴边均分 */
}
.multi-line > * { flex: 0 0 120px; height: 80px; }

/* 1. 完美居中 */
.center { display: flex; justify-content: center; align-items: center; }

/* 2. 两端对齐（左右分布） */
.between { display: flex; justify-content: space-between; align-items: center; }

/* 3. 右对齐一组元素 */
.push-right { display: flex; }
.push-right .right { margin-left: auto; }

/* 4. 等宽多列 */
.equal-cols { display: flex; }
.equal-cols > * { flex: 1; }

/* 5. 固定 + 自适应（侧栏 + 主区） */
.holy { display: flex; }
.holy .side { flex: 0 0 240px; }
.holy .main { flex: 1; min-width: 0; }

/* 6. 自适应换行的标签云 */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 7. 垂直撑满（sticky footer） */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app main { flex: 1; }

/* flex-start 在 RTL 下自动变成「右侧起点」，无需改代码 */
.rtl-aware {
  display: flex;
  justify-content: flex-start; /* LTR 靠左、RTL 自动靠右 */
}

/* 若确需按物理方向，可用逻辑属性配合 */
[dir="rtl"] .icon { transform: scaleX(-1); } /* 镜像箭头图标 */

.chat {
  display: flex;
  flex-direction: column; /* 消息纵向堆叠 */
  gap: 12px;
  padding: 16px;
}

.msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 80%;          /* 气泡不超过列宽的 80% */
}

/* 自己发的消息：整条靠右，并交换头像与气泡顺序 */
.msg.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg__avatar {
  flex: 0 0 32px;          /* 头像固定 32px，绝不缩放 */
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.msg__bubble {
  padding: 8px 12px;
  border-radius: 12px;
  background: #f1f1f1;
  min-width: 0;            /* 允许长文本换行 */
  word-break: break-word;
}

.msg.mine .msg__bubble { background: #d2e8ff; }

/* 块级：徽章独占整行 */
.block-badge { display: flex; align-items: center; gap: 4px; }

/* 内联：图标 + 文字组成的小标签，可嵌在句子中间 */
.inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
}