弹性盒模型（Flexbox）

弹性盒模型（Flexbox）是一种用于布局和排列元素的CSS模块。它提供了一种灵活的方式来创建响应式的、可伸缩的布局，适应不同尺寸的屏幕和设备。

弹性盒模型通过定义容器（父元素）和其内部的弹性项目（子元素）之间的关系来工作。容器可以设置为弹性布局模式，使其内部的项目能够根据规则自动调整其大小、顺序和对齐方式。

以下是弹性盒模型的一些关键概念和属性：

1. 容器属性：

   • display：指定容器为弹性盒模型，通过将其设置为flex或inline-flex来启用弹性布局。
   • flex-direction：指定项目在容器中的排列方向，可以是水平（横向）或垂直（纵向）。
   • justify-content：定义项目在主轴上的对齐方式，例如居中、起始对齐、末尾对齐等。
   • align-items：定义项目在交叉轴上的对齐方式，例如居中、起始对齐、末尾对齐等。
   • flex-wrap：指定是否允许项目换行排列。

2. 项目属性：

   • flex：指定项目的伸缩能力，可以通过设置flex-grow、flex-shrink和flex-basis的值来控制项目的大小调整。
   • order：定义项目的排列顺序，数值越小越靠前。
   • align-self：定义单个项目在交叉轴上的对齐方式，可以覆盖容器的align-items属性。

---

当使用弹性盒模型时，可以通过设置容器和项目的属性来创建各种布局。以下是几个示例：

1. 水平居中的导航菜单：

<style>
  .container {
    display: flex;
    justify-content: center;
  }
  
  .menu-item {
    margin: 0 10px;
  }
</style>

<div class="container">
  <div class="menu-item">Home</div>
  <div class="menu-item">About</div>
  <div class="menu-item">Contact</div>
</div>

在上述示例中，display: flex;将容器设置为弹性盒模型，justify-content: center;使菜单项在主轴上水平居中对齐。

Home

About

Contact

2. 等高列布局：

<style>
  .container {
    display: flex;
  }
  
  .column {
    flex: 1;
    border: 1px solid black;
    padding: 10px;
  }
</style>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

在上述示例中，flex: 1;使每个列具有相同的伸缩能力，从而实现等高列布局。

Column 1

Column 2

Column 3

3. 垂直居中的项目：

<style>
  .container {
    display: flex;
    align-items: center;
    height: 200px;
  }
  
  .item {
    margin: 0 10px;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在上述示例中，align-items: center;使项目在交叉轴上垂直居中对齐。

Item 1

Item 2

Item 3

---

弹性盒模型的优势在于它提供了一种灵活的方式来处理复杂的布局需求，可以轻松实现等高列、垂直居中、项目的自适应伸缩等效果。它适用于构建响应式设计、网页布局、导航菜单、表单布局等各种场景。