CSS Flex弹性布局之Flexbox空间分配机制

什么是弹性布局

弹性布局是 CSS3 的一种新的布局模式。

CSS3 弹性布局（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

Flexbox空间分配机制——动态空间分配的数学规则

Flexbox核心作用是智能地分配容器内的剩余空间，或调整元素大小以填充容器。 它通过主轴和交叉轴两条轴线，赋予开发者强大的控制权，主要解决三大问题：

• 垂直居中：以往非常棘手的垂直居中，现在只需几行代码即可实现。

• 等高分栏：让不同内容高度的栏目自动保持高度一致。

• 弹性流动：元素能够根据屏幕大小自动调整顺序、换行和所占空间，完美适配不同设备。

为了解决子元素尺寸不可控的问题，flex通过数学规则动态分配空间。

三个属性

• basis属性：基准宽度/理想宽度，即元素所占宽度，是所有计算的起点，决定是收缩还是扩张。

• grow属性：扩张因子，当容器有剩余空间时，决定如何分配这些空间，值越大，分配越多。

• shrink属性：收缩因子，当容器空间不足时，决定如何分配超出部分。

两个公式

“扩张公式”

$$\mathrm{W}=\mathrm{basis}+(\mathrm{R}\ast \frac{\mathrm{grow}}{\sum \mathrm{grow}})$$

W为最终宽度，R为剩余空间

“收缩公式”

$$\mathrm{W}=\mathrm{basis}-(O\ast \frac{\mathrm{basis}\ast \mathrm{shrink}}{\sum (\mathrm{basis}\ast \mathrm{shrink})})$$

O为超出/溢出的空间

举个例子

/* flex: <flex-grow><flex-shrink><flex-basis>; */
flex: 1 1 200px; /*可扩展、可收缩，基准宽度200px*/

应用场景

Flexbox 的应用场景极其广泛，特别适合一维布局（即所有元素要么排成一行，要么排成一列）。典型应用包括：

• 导航菜单：轻松实现水平或垂直排列，并均匀分布菜单项。
• 卡片布局：让多个高度不一的卡片底部对齐，或实现等高分栏。
• 页面主体居中：将主要内容区域在页面中完美水平垂直居中。
• 移动端布局：通过调整元素顺序和方向，为移动端提供最优的内容排列。

总结

Flexbox 空间分配的核心意义在于提供一种高效、灵活且响应式的布局方式，它彻底改变了我们处理元素在容器中排列和对齐的传统思路。

Flexbox 的数学规则通过“按需伸缩”自动计算元素尺寸，日常工作中专门解决那些需要动态均分空间、垂直居中或弹性对齐的布局难题。