创建在同一级别上包含多个容器的混搭布局时，可以为每个容器设置“扩展比例”和“收缩比例”值。比例值用于设置针对布局中每个容器保留的可用空间。应用比例值来定义混搭布局的方式有两种。可以将比例应用到容器中的剩余空白空间，也可以应用到整个容器大小。默认情况下，会将比例应用到容器中小组件周围的剩余空间。此方法更加灵活，同时可在必要时使用此方法在布局中获取额外的空白空间。或者，可以配置比例分布来创建在视区尺寸发生更改时容器比例保持恒定的布局，而无需设置每个容器中项的因子。例如，下图显示了具有三个容器的混搭。

每个容器显示不同数量的项。第一个和第二个容器的“扩展比例”设置为 1，第三个容器比比例设置为 2。默认情况下，将计算每个容器内小组件周围的剩余空间，并将扩展和收缩比例应用至剩余空间。在本示例中，已显示容器 2 的完整内容，并且它比容器 1 更大，其中容器 1 与容器 2 具有相同的扩展比例，而仅有一个小组件。容器 3 中小组件周围的空间是容器 1 和 2 容器大小的两倍，如红色箭头所示。

要控制比例在混搭布局中的分布方式，请执行以下步骤：

扩展和收缩比例即会应用至布局中每个容器的完整大小。下图显示了具有相同扩展和收缩比例的混搭示例，其中 flex-basis 属性已设置为 0。

该比例将应用至每个容器的整个宽度，在本示例中，布局中空白空间的使用率较低。容器 3 使用了布局中可用空间的一半。其余两个容器分别使用了可用空间的四分之一。将会忽略每个容器中的项尺寸，尽管容器 1 和 2 中小组件数量不同，但其大小相同。容器 2 的小组件仅部分显示，因为将比例定义为 1 时的宽度不足以显示当前视区上的所有小组件。