#Deprecated linear-weight-sum

#介绍

线性布局中，子元件在父容器主轴方向上的权重和。线性布局的权重概念类似于弹性布局的 flex-grow。

当一个线性布局容器的 linear-weight-sum 样式为非 0 时：

• 首先会测量所有 linear-weight:0 的子元件，并计算这些子元件占用主轴方向上的尺寸。
• 其余的 linear-weight 非 0 的子元件，将按照其 linear-weight 分配剩余的（线性布局容器减去所有的 linear-weight: 0 的子元件的主轴大小）主轴方向上的尺寸。为了方便计算展示，“所有子元件 linear-weight 之和”看作符号“S”。

  • 当 linear-weight-sum <= S 时：

    子元件尺寸 = 子元件对应的 linear-weight ÷ S ✖️ 剩余的主轴方向上的尺寸

  • 当 linear-weight-sum > S 时：

    子元件尺寸 = 子元件对应的 linear-weight ÷ linear-weight-sum ✖️ 剩余的主轴方向上的尺寸

#使用示例

图中父元件高度 400px，第一个元件固定 100px，剩余高度 300px，第二、三个元件指定大小，根据权值分配，第二个元件高 200px，第三个元件高 100px。

css-apisrc/linear-weight-sum/App.tsx

Code

预览

#语法

linear-weight-sum: 2;
linear-weight-sum: 5.5;

#取值

• <number>

  负值无效，默认值为 0。

#形式定义

#形式语法

linear-weight-sum = <number>

#与 Web 的区别

• Web 无该样式。

#兼容性

#常见问题

• 线性容器主轴大小必须是确定值（推荐，不然会有莫名其妙的表现）；

• 不支持同时使用固定值和 linear-weight，如果有 linear-weight，自动忽略固定值（性能优先）；