弹性盒布局模型

pax大约 4 分钟

弹性盒布局模型（Flexbox）

Flexbox（Flexible Box）是 CSS3 中的一种一维布局模型，旨在提供一种更加有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小是未知或动态的。

一、Flexbox 核心概念

1. 容器与项目

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

.container {
  display: flex; /* 创建弹性容器 */
}

.item {
  /* 这些是弹性项目 */
}

2. 主轴与交叉轴

Main Axis（主轴）：项目排列的主要方向
Cross Axis（交叉轴）：垂直于主轴的方向

二、容器属性（Flex Container）

1. `flex-direction` - 主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

2. `flex-wrap` - 换行控制

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3. `flex-flow` - 简写属性

.container {
  flex-flow: <flex-direction> <flex-wrap>;
  /* 例如: flex-flow: row wrap; */
}

4. `justify-content` - 主轴对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默认）：起始位置对齐
flex-end：结束位置对齐
center：居中对齐
space-between：两端对齐，项目间等间距
space-around：每个项目两侧间距相等
space-evenly：所有间距相等

5. `align-items` - 交叉轴对齐

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch（默认）：拉伸填满容器
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴居中对齐
baseline：基线对齐

6. `align-content` - 多行交叉轴对齐

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

仅在多行（flex-wrap: wrap）时有效

三、项目属性（Flex Items）

1. `order` - 排序

.item {
  order: <integer>; /* 默认为 0 */
}

.item1 { order: 1; }
.item2 { order: -1; } /* 会排在最前面 */

2. `flex-grow` - 放大比例

.item {
  flex-grow: <number>; /* 默认为 0 */
}

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; } /* 占据 2 倍剩余空间 */

3. `flex-shrink` - 缩小比例

.item {
  flex-shrink: <number>; /* 默认为 1 */
}

4. `flex-basis` - 主轴空间分配

.item {
  flex-basis: <length> | auto; /* 默认为 auto */
}

5. `flex` - 简写属性

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

常用值：

flex: auto; 等同于 flex: 1 1 auto;
flex: none; 等同于 flex: 0 0 auto;
flex: 1; 等同于 flex: 1 1 0%;

6. `align-self` - 单个项目对齐

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

四、实际应用示例

1. 水平垂直居中

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

<div class="center-container">
  <div class="content">居中内容</div>
</div>

2. 三栏布局（左右固定，中间自适应）

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 200px; /* 不放大，不缩小，基础宽度 200px */
  background: #f0f0f0;
}

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

<div class="layout">
  <div class="sidebar">左侧栏</div>
  <div class="main">主要内容</div>
  <div class="sidebar">右侧栏</div>
</div>

3. 等分布局

.equal-container {
  display: flex;
}

.equal-item {
  flex: 1; /* 等分剩余空间 */
  text-align: center;
}

<div class="equal-container">
  <div class="equal-item">项目1</div>
  <div class="equal-item">项目2</div>
  <div class="equal-item">项目3</div>
</div>

4. 圣杯布局

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

.header, .footer {
  flex: 0 0 auto;
  background: #333;
  color: white;
  padding: 10px;
}

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

.nav {
  flex: 0 0 200px;
  background: #f0f0f0;
}

.article {
  flex: 1;
  padding: 10px;
}

.aside {
  flex: 0 0 200px;
  background: #e0e0e0;
}

<div class="holy-grail">
  <header class="header">头部</header>
  <div class="main-content">
    <nav class="nav">导航</nav>
    <article class="article">主要内容</article>
    <aside class="aside">侧边栏</aside>
  </div>
  <footer class="footer">底部</footer>
</div>

五、Flexbox 优势与局限

优势：

简单易用：属性直观，易于理解
响应式友好：天然支持响应式布局
对齐能力强：轻松实现各种对齐方式
一维布局：适合单方向布局需求

局限：

一维限制：不适合复杂的二维布局
兼容性：老版本 IE 支持不佳
性能考虑：复杂布局可能影响渲染性能

六、与 Grid 布局的区别

特性	Flexbox	Grid
维度	一维布局	二维布局
适用场景	单行/单列布局	复杂网格布局
对齐能力	强	更强
学习成本	较低	较高
兼容性	较好	现代浏览器

七、总结

Flexbox 是现代 CSS 布局的核心技术之一，特别适合处理一维布局问题。掌握其核心属性和应用场景，能够显著提升布局开发效率和代码质量。对于复杂的二维布局需求，可以结合 CSS Grid 使用。