Flexbox 布局完全指南

什么是 Flexbox

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

基本概念

Flex 容器和 Flex 项目

• Flex 容器（Flex Container）：设置了 display: flex 或 display: inline-flex 的元素
• Flex 项目（Flex Items）：Flex 容器的直接子元素

<div class="container"> <!-- Flex 容器 -->
  <div class="item">项目1</div> <!-- Flex 项目 -->
  <div class="item">项目2</div> <!-- Flex 项目 -->
  <div class="item">项目3</div> <!-- Flex 项目 -->
</div>

主轴和交叉轴

• 主轴（Main Axis）：Flex 容器的主要轴线
• 交叉轴（Cross Axis）：垂直于主轴的轴线

Flex 容器属性

1. display

启用 Flexbox 布局：

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

2. flex-direction

定义主轴方向：

.container {
  flex-direction: row;         /* 默认值，水平从左到右 */
  flex-direction: row-reverse; /* 水平从右到左 */
  flex-direction: column;      /* 垂直从上到下 */
  flex-direction: column-reverse; /* 垂直从下到上 */
}

3. flex-wrap

定义项目是否换行：

.container {
  flex-wrap: nowrap;    /* 默认值，不换行 */
  flex-wrap: wrap;      /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

4. flex-flow

flex-direction 和 flex-wrap 的简写：

.container {
  flex-flow: row nowrap; /* 默认值 */
  flex-flow: column wrap;
}

5. 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;  /* 项目间间隔完全相等 */
}

6. align-items

定义交叉轴上的对齐方式：

.container {
  align-items: stretch;     /* 默认值，拉伸填满容器 */
  align-items: flex-start;  /* 交叉轴起点对齐 */
  align-items: flex-end;    /* 交叉轴终点对齐 */
  align-items: center;      /* 交叉轴中点对齐 */
  align-items: baseline;    /* 项目的第一行文字的基线对齐 */
}

7. 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;
  align-content: space-evenly;
}

Flex 项目属性

1. order

定义项目的排列顺序，数值越小，排列越靠前：

.item {
  order: 0; /* 默认值 */
  order: 1;
  order: -1;
}

2. flex-grow

定义项目的放大比例，默认为 0（不放大）：

.item {
  flex-grow: 0; /* 默认值，不放大 */
  flex-grow: 1; /* 平均分配剩余空间 */
  flex-grow: 2; /* 获得 2 倍的剩余空间 */
}

3. flex-shrink

定义项目的缩小比例，默认为 1（等比缩小）：

.item {
  flex-shrink: 1; /* 默认值，等比缩小 */
  flex-shrink: 0; /* 不缩小 */
  flex-shrink: 2; /* 缩小比例为 2 */
}

4. flex-basis

定义项目占据的主轴空间：

.item {
  flex-basis: auto; /* 默认值，项目本来大小 */
  flex-basis: 200px; /* 固定宽度 */
  flex-basis: 30%; /* 百分比 */
}

5. flex

flex-grow、flex-shrink 和 flex-basis 的简写：

.item {
  flex: 0 1 auto; /* 默认值 */
  flex: 1;        /* 等同于 flex: 1 1 0% */
  flex: auto;     /* 等同于 flex: 1 1 auto */
  flex: none;     /* 等同于 flex: 0 0 auto */
}

6. align-self

允许单个项目有与其他项目不一样的对齐方式：

.item {
  align-self: auto;       /* 默认值，继承父元素的 align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

常用布局实例

1. 水平居中

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

2. 垂直居中

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

3. 水平垂直居中

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

4. 等高布局

.container {
  display: flex;
  align-items: stretch; /* 默认值 */
}

5. 自适应布局

.container {
  display: flex;
}

.sidebar {
  flex: 0 0 200px; /* 固定宽度 */
}

.main {
  flex: 1; /* 占据剩余空间 */
}

6. 底部对齐

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

.header {
  flex: 0 0 auto;
}

.main {
  flex: 1;
}

.footer {
  flex: 0 0 auto;
}

实用技巧

1. 间隙设置

.container {
  display: flex;
  gap: 20px; /* 项目间的间隙 */
}

2. 响应式布局

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

.item {
  flex: 1 1 300px; /* 最小宽度 300px，自适应 */
}

3. 多行对齐

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

浏览器兼容性

Flexbox 已经得到了现代浏览器的广泛支持：

• Chrome 29+
• Firefox 28+
• Safari 9+
• IE 11+（需要 -ms- 前缀）

总结

Flexbox 是现代 CSS 布局的重要工具，它解决了传统布局方式的诸多问题：

1. 简化了居中对齐
2. 实现了真正的响应式布局
3. 解决了等高布局问题
4. 提供了灵活的空间分配机制