flexbox（弹性盒布局模型）是什么，适用什么场景？

Flexbox（弹性盒布局模型）是一种 CSS 布局模式，旨在简化和优化在容器内分配空间和对齐项目的过程。它使得在布局中处理复杂的对齐、空间分配和顺序问题变得更加简单和高效。

Flexbox 主要概念

1. 容器和项目：

   • Flex 容器：使用 display: flex 或 display: inline-flex 将一个元素指定为 flex 容器。
   • Flex 项目：容器内部的直接子元素，即 flex 容器的项目。

2. 主轴和交叉轴：

   • 主轴：定义了 flex 项目排列的方向（默认为水平轴）。可以通过 flex-direction 属性设置。
   • 交叉轴：与主轴垂直的轴，控制项目的对齐方式。可以通过 align-items 和 align-self 属性设置。

3. 主要属性：

   • display: flex：将元素设为 flex 容器。
   • flex-direction：定义主轴方向（row、column、row-reverse、column-reverse）。
   • flex-wrap：定义项目是否换行（nowrap、wrap、wrap-reverse）。
   • flex-flow：是 flex-direction 和 flex-wrap 的缩写形式。
   • justify-content：在主轴上对齐项目（flex-start、flex-end、center、space-between、space-around）。
   • align-items：在交叉轴上对齐项目（flex-start、flex-end、center、baseline、stretch）。
   • align-self：控制单个项目在交叉轴上的对齐方式，覆盖 align-items 设置。
   • align-content：在多行的交叉轴上对齐所有行（flex-start、flex-end、center、space-between、space-around、stretch）。

4. 项目属性：

   • flex-grow：定义项目的放大比例。
   • flex-shrink：定义项目的缩小比例。
   • flex-basis：定义项目在主轴上的初始大小。
   • flex：flex-grow、flex-shrink 和 flex-basis 的简写属性。
   • align-self：覆盖 align-items 对单个项目的对齐方式。

适用场景

1. 水平或垂直对齐：

   • Flexbox 使得水平和垂直对齐项目变得简单，无论是单行还是多行布局，都能很方便地进行对齐和分布。

2. 响应式布局：

   • 通过使用 flex-wrap 和 flex-grow 等属性，能够实现响应式布局，让项目在容器大小变化时自动调整。

3. 动态空间分配：

   • Flexbox 可以根据可用空间动态调整项目的大小和位置，适用于需要动态调整布局的场景。

4. 复杂的排列：

   • 例如，创建多列布局、导航栏、卡片布局等，Flexbox 提供了强大的工具来处理这些复杂的排列问题。

示例

水平居中对齐：

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

<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中对齐 */
  }
  .item {
    margin: 10px;
  }
</style>

垂直居中对齐：

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

<style>
  .container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    height: 100vh; /* 高度设置为视口高度 */
  }
  .item {
    margin: 10px;
  }
</style>

Flexbox 是一种非常强大且灵活的布局工具，能够解决许多传统布局模型无法轻松处理的问题。它在现代 Web 开发中被广泛应用。