Angular Flex Layout：父元素fxLayout=column时如何让fxFlex控制子元素宽度？

问题原因 #

Angular Flex Layout 中 fxFlex 配置默认作用于 Flex 布局的主轴方向：

• 父元素设置 fxLayout="column" 时主轴为垂直方向，fxFlex="80" 会作用于子元素高度
• 父元素设置 fxLayout="row" 时主轴为水平方向，fxFlex="80" 会作用于子元素宽度，符合你提到的预期效果

解决方案 #

保留外层 fxLayout="column" 配置的前提下，有两种声明式写法可以实现子元素宽度占比80%的需求：

1. 使用 Flex Layout 原生提供的跨主轴尺寸属性
   直接给子元素设置 fxFlexWidth="80" 即可，该属性专门用于声明子元素宽度，不受父元素主轴方向影响。如果同时需要保留子元素在垂直方向的 flex 伸缩配置，可同时保留原有的 fxFlex 属性。
   示例代码：

<!-- 父元素保留column配置 -->
<div fxLayout="column" style="width: 600px; height: 400px;">
  <!-- 宽度占父元素80%，若需要控制高度可额外加fxFlex配置 -->
  <div fxFlexWidth="80" style="background: #f5f5f5;">
    子元素内容
  </div>
</div>

2. 低版本兼容方案
   如果你使用的 Angular Flex Layout 版本不支持 fxFlexWidth，可以用声明式样式绑定实现：给子元素添加 [style.width.%]="80" 即可，效果完全一致。

内容的提问来源于stack exchange，提问作者Thabo