什么是弹性盒布局模型？ - 前端面试题

弹性盒布局模型，通常称为Flexbox，是CSS3中的一种先进布局方式，旨在提供一种更有效的方式来布置、对齐和分配容器内项目的空间，即使它们的尺寸是未知或者是动态变化的。Flexbox布局给予了容器能够扩展项目以填充可用空间，或者收缩它们以防止溢出的能力。

Flexbox的主要特点：

灵活性：Flexbox允许项目的宽度和高度可以根据容器的空间动态伸缩。
方向无关性：与传统的布局（如块布局，基于行，或内联布局，基于列）不同，Flexbox的方向可以是水平的或垂直的，这意味着它不受页面流的限制。
容器和项目的区别：在Flexbox中存在两种类型的元素：容器（flex容器）和项目（flex项目）。容器用来定义一个flex环境并包含一些布局属性，项目则是容器的子元素，可以使用不同的属性来控制其自身的排版。
对齐：可以轻松地在水平或垂直方向上对齐项目，这在以前的布局模型（如浮动或定位）中通常需要额外的工作。
空间分配：当项目占用的空间小于容器的时候，可以控制多余空间的分配方式，或者当空间不足时，控制如何收缩项目。

例子：

假设我们有一个导航菜单，我们希望菜单项在容器内均匀分布，并且在不同屏幕尺寸上都能保持良好的布局。使用Flexbox，我们可以这样来定义容器和项目：

css
/* Flex Container */
.nav-menu {
  display: flex;
  justify-content: space-between; /* 分散对齐子项 */
}

/* Flex Items */
.nav-item {
  flex-grow: 1; /* 允许子项根据需要占据空间 */
  text-align: center; /* 文本居中对齐 */
}

在HTML中，我们的导航菜单可能是这样的：

html
<nav class="nav-menu">
  <a class="nav-item" href="#">首页</a>
  <a class="nav-item" href="#">关于我们</a>
  <a class="nav-item" href="#">服务</a>
  <a class="nav-item" href="#">联系方式</a>
</nav>

在上述示例中，.nav-menu是一个flex容器，.nav-item是其子项，也就是flex项目。通过对.nav-menu使用display: flex;属性，我们定义了一个弹性容器，并且使用justify-content: space-between;来确保.nav-item在容器内均匀分布。每个.nav-item都被设置了flex-grow: 1;属性，这意味着所有的子项都会根据可用空间进行伸缩，来占据容器的空间。这样，不管屏幕大小如何变化，菜单项都能保持均匀的布局。

Flexbox的这种灵活性和易用性，使得它成为创建响应式布局和现代网页设计必不可少的工具之一。