Flexbox 布局系统

第3章：Flexbox 布局系统

3.1 Flexbox 基础概念

Flexbox（弹性盒子布局）是现代CSS3中最重要的布局技术之一，它提供了一种更有效的方式来布局、对齐和分配容器内项目的空间。

3.1.1 Flex 容器和项目

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

.item {
  /* 项目属性 */
}

3.1.2 主轴和交叉轴

• 主轴：由 flex-direction 定义的方向
• 交叉轴：垂直于主轴的方向

3.2 Flex 容器属性

3.2.1 flex-direction

.container {
  flex-direction: row;        /* 默认：水平排列 */
  flex-direction: row-reverse; /* 水平反向排列 */
  flex-direction: column;     /* 垂直排列 */
  flex-direction: column-reverse; /* 垂直反向排列 */
}

3.2.2 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; /* 项目完全等距 */
}

3.2.3 align-items

.container {
  align-items: stretch;     /* 默认：拉伸填满 */
  align-items: flex-start;  /* 交叉轴起点对齐 */
  align-items: flex-end;    /* 交叉轴终点对齐 */
  align-items: center;      /* 交叉轴居中对齐 */
  align-items: baseline;    /* 基线对齐 */
}

3.2.4 flex-wrap

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

3.2.5 align-content

.container {
  align-content: stretch;      /* 默认：拉伸行 */
  align-content: flex-start;   /* 交叉轴起点对齐 */
  align-content: flex-end;    /* 交叉轴终点对齐 */
  align-content: center;      /* 交叉轴居中对齐 */
  align-content: space-between; /* 行间等距 */
  align-content: space-around;  /* 行周围等距 */
}

3.3 Flex 项目属性

3.3.1 order

.item {
  order: 0; /* 默认顺序 */
  order: 1; /* 数字越大，排列越后 */
  order: -1; /* 数字越小，排列越前 */
}

3.3.2 flex-grow

.item {
  flex-grow: 0; /* 默认：不扩展 */
  flex-grow: 1; /* 按比例扩展 */
}

3.3.3 flex-shrink

.item {
  flex-shrink: 1; /* 默认：可收缩 */
  flex-shrink: 0; /* 不可收缩 */
}

3.3.4 flex-basis

.item {
  flex-basis: auto; /* 默认：基于内容 */
  flex-basis: 200px; /* 固定尺寸 */
  flex-basis: 20%;  /* 百分比尺寸 */
}

3.3.5 align-self

.item {
  align-self: auto;       /* 默认：继承容器 */
  align-self: flex-start;  /* 项目单独对齐 */
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
}

3.4 实战应用

3.4.1 响应式导航栏

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-menu {
    flex-direction: column;
    gap: 1rem;
  }
}

3.4.2 卡片布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* 增长 收缩 基础尺寸 */
  min-width: 0; /* 防止内容溢出 */
}

3.4.3 圣杯布局

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

.header, .footer {
  flex: 0 0 auto;
}

.main {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.content {
  flex: 1;
  min-width: 0;
}

3.5 高级技巧

3.5.1 等分布局

.equal-columns {
  display: flex;
}

.equal-columns > * {
  flex: 1; /* 所有项目等分 */
  min-width: 0;
}

3.5.2 粘性页脚

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

.content {
  flex: 1;
}

3.5.3 居中技巧

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

3.6 性能优化

3.6.1 避免过度嵌套

/* 不推荐 */
.container > .wrapper > .inner {
  display: flex;
}

/* 推荐 */
.container {
  display: flex;
}

3.6.2 合理使用 flex-wrap

/* 移动端优先 */
.container {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .container {
    flex-wrap: nowrap;
  }
}

3.7 浏览器兼容性

Flexbox 在现代浏览器中得到了很好的支持：

• Chrome 21+
• Firefox 28+
• Safari 9+
• Edge 12+

对于旧版浏览器，可以使用 autoprefixer 自动添加前缀。

3.8 总结

Flexbox 是现代CSS布局的核心技术，它简化了复杂的布局问题，提供了强大的对齐和分布能力。掌握Flexbox是成为现代前端开发者的必备技能。