𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···

𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手

𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

Flexbox 布局完全指南

Flexbox 是一种强大的 CSS 布局方式，专门用于处理一维布局问题，能够轻松实现居中、分布对齐等常见布局需求。

什么是 Flexbox？

Flexbox（Flexible Box）是 CSS3 中的一种布局模型，它提供了一个更有效的方式来排列、分布和对齐容器中的项目，即使它们的大小未知或动态变化。

基本概念

容器和项目

/* Flex 容器 */
.container {
  display: flex;
  /* 或 */
  display: inline-flex;
}

/* Flex 项目 */
.container > div {
  /* 这些 div 自动成为 flex 项目 */
}

主轴和交叉轴

主轴（Main Axis）：Flex 容器的主方向
交叉轴（Cross Axis）：垂直于主轴的方向

容器属性

display

.flex-container {
  display: flex;           /* 块级 flex 容器 */
  display: inline-flex;    /* 行内 flex 容器 */
}

flex-direction

/* 定义主轴方向 */
.row {
  flex-direction: row;         /* 水平方向，从左到右 */
  flex-direction: row-reverse; /* 水平方向，从右到左 */
  flex-direction: column;      /* 垂直方向，从上到下 */
  flex-direction: column-reverse; /* 垂直方向，从下到上 */
}

flex-wrap

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

/* 简写 */
.flex-flow: row wrap;

justify-content（主轴对齐）

.container {
  justify-content: flex-start;   /* 开始位置对齐 */
  justify-content: flex-end;     /* 结束位置对齐 */
  justify-content: center;       /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around;  /* 每个项目两侧间隔相等 */
  justify-content: space-evenly;  /* 所有间隔相等 */
}

align-items（交叉轴对齐）

.container {
  align-items: stretch;     /* 拉伸填充容器（默认） */
  align-items: flex-start;   /* 交叉轴开始位置对齐 */
  align-items: flex-end;     /* 交叉轴结束位置对齐 */
  align-items: center;       /* 交叉轴居中对齐 */
  align-items: baseline;     /* 基线对齐 */
}

align-content（多行对齐）

.container {
  align-content: flex-start;    /* 多行在交叉轴开始位置对齐 */
  align-content: flex-end;      /* 多行在交叉轴结束位置对齐 */
  align-content: center;        /* 多行在交叉轴居中对齐 */
  align-content: space-between; /* 两端对齐，行间间隔相等 */
  align-content: space-around;  /* 每行两侧间隔相等 */
  align-content: stretch;       /* 拉伸填充容器（默认） */
}

项目属性

order

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
/* 项目会按照 order 值排序，默认为 0 */

flex-grow

.item1 { flex-grow: 0; } /* 不放大（默认） */
.item2 { flex-grow: 1; } /* 放大占剩余空间 */
.item3 { flex-grow: 2; } /* 放大占两倍剩余空间 */

flex-shrink

.item1 { flex-shrink: 1; } /* 缩小（默认） */
.item2 { flex-shrink: 0; } /* 不缩小 */
.item3 { flex-shrink: 2; } /* 两倍缩小 */

flex-basis

.item {
  flex-basis: auto;      /* 自动计算（默认） */
  flex-basis: 100px;     /* 固定宽度 */
  flex-basis: 20%;       /* 百分比宽度 */
  flex-basis: 0;         /* 不考虑内容大小 */
}

flex（简写）

.item {
  flex: none;           /* 0 0 auto */
  flex: auto;           /* 1 1 auto */
  flex: initial;        /* 0 1 auto */
  flex: 1;              /* 1 1 0 */
  flex: 0 0 100px;      /* 0 0 100px */
  flex: 2 2 200px;      /* 2 2 200px */
}

align-self

.item1 { align-self: auto;     /* 继承容器设置 */
.item2 { align-self: flex-start; }
.item3 { align-self: flex-end; }
.item4 { align-self: center; }
.item5 { align-self: baseline; }
.item6 { align-self: stretch; }

实用布局示例

垂直居中

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

三栏布局

.sidebar {
  flex: 0 0 200px;
}

.main {
  flex: 1;
}

.sidebar-right {
  flex: 0 0 200px;
}

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

卡片布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* 至少 300px，等比例扩展 */
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

导航栏

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #333;
  color: white;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

粘性页脚

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  flex: 0 0 auto;
}

.site-content {
  flex: 1 0 auto;
}

.site-footer {
  flex: 0 0 auto;
}

常见问题和解决方案

项目溢出

/* 问题：项目超出容器 */
.container {
  display: flex;
}

/* 解决方案 1：换行 */
.container {
  flex-wrap: wrap;
}

/* 解决方案 2：缩小 */
.item {
  flex-shrink: 1;
  min-width: 0; /* 允许缩小到 0 */
}

/* 解决方案 3：使用 min-width */
.item {
  min-width: 100px;
  flex-basis: 100px;
}

垂直居中失效

/* 确保 container 有足够高度 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 或具体高度 */
}

文本溢出处理

.item {
  min-width: 0; /* 重要：允许 flex 项目缩小 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Flexbox 与 Grid 的比较

场景	推荐使用	原因
一维布局（行或列）	Flexbox	专为单轴设计
二维布局（行和列）	Grid	支持网格系统
组件内部布局	Flexbox	简单直接
页面整体布局	Grid	更强大和精确
内容居中对齐	Flexbox	更简单
复杂网格布局	Grid	更适合