编辑“︁CSS弹性盒概念”︁

{{DISPLAYTITLE:CSS弹性盒概念}}  
[[CSS弹性盒布局]]（Flexbox）是CSS3中引入的一种现代布局模式，专为解决传统布局方式的局限性而设计。它提供了一种高效的方式来分配容器内项目的空间、对齐方式及顺序，尤其适用于响应式设计。本章将系统介绍弹性盒的核心概念、术语及基本用法。

== 核心概念 ==  
弹性盒布局基于'''弹性容器'''（flex container）和'''弹性项目'''（flex items）的父子关系。通过设置容器的<code>display: flex</code>，其直接子元素自动成为弹性项目，并遵循弹性盒规则。

=== 弹性容器与项目 ===  
* '''弹性容器'''：定义了布局环境的父元素，通过<code>display: flex</code>或<code>display: inline-flex</code>激活。  
* '''弹性项目'''：容器的直接子元素，其布局行为由容器属性控制。  

以下是一个基础示例：  
<syntaxhighlight lang="css">  
/* 容器设置为弹性盒 */  
.container {  
  display: flex;  
  border: 2px solid #333;  
  padding: 10px;  
}  

/* 弹性项目 */  
.item {  
  background: #f0a;  
  margin: 5px;  
  padding: 10px;  
}  
</syntaxhighlight>  

<syntaxhighlight lang="html">  
<div class="container">  
  <div class="item">项目1</div>  
  <div class="item">项目2</div>  
  <div class="item">项目3</div>  
</div>  
</syntaxhighlight>  

'''输出效果'''：三个项目默认水平排列，宽度根据内容自动分配，剩余空间均匀分布。

== 主轴与交叉轴 ==  
弹性盒布局依赖两条轴线：  
* '''主轴（Main Axis）'''：项目默认排列方向（由<code>flex-direction</code>定义）。  
* '''交叉轴（Cross Axis）'''：垂直于主轴的轴线。  

<mermaid>  
flowchart LR  
  A[主轴] -->|flex-direction: row| B(水平从左到右)  
  A -->|flex-direction: column| C(垂直从上到下)  
  D[交叉轴] -->|主轴为row| E(垂直方向)  
  D -->|主轴为column| F(水平方向)  
</mermaid>  

== 容器属性详解 ==  
以下属性控制容器的布局行为：  

=== flex-direction ===  
定义主轴方向：  
* <code>row</code>（默认）：水平排列，起点在左端。  
* <code>row-reverse</code>：水平排列，起点在右端。  
* <code>column</code>：垂直排列，起点在上沿。  
* <code>column-reverse</code>：垂直排列，起点在下沿。  

=== justify-content ===  
控制主轴对齐方式：  
<syntaxhighlight lang="css">  
.container {  
  justify-content: center; /* 可选值：flex-start, flex-end, space-between, space-around */  
}  
</syntaxhighlight>  

=== align-items ===  
控制交叉轴对齐方式：  
<syntaxhighlight lang="css">  
.container {  
  align-items: stretch; /* 可选值：flex-start, flex-end, center, baseline */  
}  
</syntaxhighlight>  

== 项目属性 ==  
弹性项目可通过以下属性覆盖容器默认设置：  

=== flex-grow ===  
定义项目放大比例（默认0不放大）：  
<syntaxhighlight lang="css">  
.item {  
  flex-grow: 1; /* 剩余空间按比例分配 */  
}  
</syntaxhighlight>  

=== flex-shrink ===  
定义项目缩小比例（默认1可缩小）。  

=== order ===  
控制项目排列顺序（数值越小越靠前）。  

== 实际案例 ==  
=== 导航栏布局 ===  
<syntaxhighlight lang="html">  
<nav class="navbar">  
  <a href="#">首页</a>  
  <a href="#">产品</a>  
  <a href="#">关于</a>  
</nav>  
</syntaxhighlight>  

<syntaxhighlight lang="css">  
.navbar {  
  display: flex;  
  justify-content: space-around;  
  background: #333;  
  padding: 10px;  
}  
.navbar a {  
  color: white;  
  text-decoration: none;  
}  
</syntaxhighlight>  

'''效果'''：链接均匀分布，适应不同屏幕宽度。  

== 数学基础 ==  
弹性盒的空间分配遵循公式：  
<math>  
\text{项目最终尺寸} = \text{基础尺寸} + (\text{剩余空间} \times \frac{\text{flex-grow}}{\sum \text{flex-grow}})  
</math>  

== 总结 ==  
弹性盒布局简化了复杂布局的实现，尤其适合动态内容与响应式设计。掌握主轴/交叉轴、容器与项目属性的协同作用，是高效使用Flexbox的关键。后续章节将深入探讨高级用例与兼容性处理。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS弹性盒布局]]