编辑“︁CSS弹性盒概念”︁（章节）

== 核心概念 ==  
弹性盒布局基于'''弹性容器'''（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>  

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