Flexbox布局实战指南

第4章: Flexbox布局实战指南

🎯 本章重点

Flexbox核心概念和术语
容器和项目的属性详解
实际布局场景应用

📖 内容概述

4.1 Flexbox基础概念

容器和项目

css 复制代码

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

.item {
  /* 自动成为flex项目 */
}

4.2 容器属性详解

4.2.1 flex-direction

css 复制代码

.container {
  flex-direction: row;            /* 默认：从左到右 */
  flex-direction: row-reverse;    /* 从右到左 */
  flex-direction: column;         /* 从上到下 */
  flex-direction: column-reverse; /* 从下到上 */
}

4.2.2 justify-content

css 复制代码

.container {
  justify-content: flex-start;    /* 默认：起始对齐 */
  justify-content: flex-end;      /* 末尾对齐 */
  justify-content: center;        /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around;  /* 周围留白 */
  justify-content: space-evenly;  /* 均匀分布 */
}

4.2.3 align-items

css 复制代码

.container {
  align-items: stretch;      /* 默认：拉伸填满 */
  align-items: flex-start;   /* 起始对齐 */
  align-items: flex-end;     /* 末尾对齐 */
  align-items: center;       /* 居中对齐 */
  align-items: baseline;     /* 基线对齐 */
}

4.2.4 flex-wrap

css 复制代码

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

4.2.5 align-content

css 复制代码

.container {
  align-content: stretch;      /* 默认：拉伸填满 */
  align-content: flex-start;   /* 起始对齐 */
  align-content: flex-end;     /* 末尾对齐 */
  align-content: center;       /* 居中对齐 */
  align-content: space-between; /* 两端对齐 */
  align-content: space-around;  /* 周围留白 */
}

4.3 项目属性详解

4.3.1 order

css 复制代码

.item {
  order: 0; /* 默认值，数值越小越靠前 */
}

.item-1 { order: 1; }
.item-2 { order: 2; }
.item-first { order: -1; } /* 最前面 */

4.3.2 flex-grow

css 复制代码

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

.item-grow { flex-grow: 1; } /* 按比例扩展 */

4.3.3 flex-shrink

css 复制代码

.item {
  flex-shrink: 1; /* 默认：允许收缩 */
}

.item-no-shrink { flex-shrink: 0; } /* 禁止收缩 */

4.3.4 flex-basis

css 复制代码

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

4.3.5 flex (简写)

css 复制代码

.item {
  flex: none;            /* 0 0 auto */
  flex: auto;            /* 1 1 auto */
  flex: 1;               /* 1 1 0% */
  flex: 0 0 200px;       /* 不扩展、不收缩、固定200px */
  flex: 2 1 300px;       /* 扩展比例2、允许收缩、基础300px */
}

4.3.6 align-self

css 复制代码

.item {
  align-self: auto;      /* 默认：继承容器 */
  align-self: flex-start; /* 起始对齐 */
  align-self: flex-end;   /* 末尾对齐 */
  align-self: center;     /* 居中对齐 */
  align-self: stretch;    /* 拉伸填满 */
  align-self: baseline;   /* 基线对齐 */
}

4.4 实战布局模式

4.4.1 水平居中

css 复制代码

.center-horizontal {
  display: flex;
  justify-content: center;
}

4.4.2 垂直居中

css 复制代码

.center-vertical {
  display: flex;
  align-items: center;
}

4.4.3 完全居中

css 复制代码

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.4.4 等分布局

css 复制代码

.equal-columns {
  display: flex;
}

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

4.4.5 圣杯布局

css 复制代码

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

.holy-grail main {
  flex: 1; /* 主要内容区域扩展 */
}

.holy-grail header,
.holy-grail footer {
  flex: none; /* 页眉页脚不扩展 */
}

4.5 响应式Flexbox

移动端优先

css 复制代码

.container {
  display: flex;
  flex-direction: column;
}

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

自适应导航

css 复制代码

.nav {
  display: flex;
  flex-wrap: wrap;
}

.nav-item {
  flex: 1 0 120px; /* 最小120px，自动换行 */
}

4.6 特殊技巧

最后一项右对齐

css 复制代码

.nav {
  display: flex;
}

.nav-item:last-child {
  margin-left: auto;
}

等高卡片

css 复制代码

.card-container {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* 内容区域扩展，实现等高 */
}

粘性页脚

css 复制代码

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

.content {
  flex: 1;
}

.footer {
  margin-top: auto;
}

💡 最佳实践

移动优先: 从移动端布局开始
语义化: 使用有意义的类名
渐进增强: 为不支持Flexbox的浏览器提供回退
性能: 避免过度嵌套Flex容器

🎯 下一章预览

下一章将深入探讨Grid布局系统，构建更复杂的二维布局。

最后更新: 2024年12月