fxLayout设为column时，如何调整Angular Flex Layout子组件宽度？

核心原因：你忽略了Flex主轴方向对fxFlex的影响 #

当fxLayout="column"时，Flex容器的主轴是垂直方向，此时fxFlex属性会作用于主轴维度（也就是子组件的高度），这就是为什么你修改fxFlex值只会改变高度的原因。

解决方案 #

要调整column布局下子组件的宽度（交叉轴维度），可以用以下两种常用方法：

方法1：直接设置宽度样式

给目标组件添加宽度样式，简单直接：

<div fxLayout="column">
  <div fxFlex class="box red">Red</div>
  <!-- 直接设置宽度为可用区域的50% -->
  <div fxFlex class="box yellow" style="width: 50%;">Yellow</div>
  <div fxFlex class="box blue">Blue</div>
</div>

如果需要让组件水平居中，可以给父容器加上交叉轴对齐配置：

<div fxLayout="column" fxLayoutAlign="start center">
  <!-- 子组件内容 -->
</div>

方法2：嵌套row布局容器

利用row布局的主轴是水平方向的特性，把目标组件放在fxLayout="row"的子容器中，再用fxFlex控制宽度：

<div fxLayout="column">
  <div fxFlex class="box red">Red</div>
  <div fxFlex>
    <div fxLayout="row">
      <!-- 在row布局中，fxFlex控制宽度 -->
      <div fxFlex="50" class="box yellow">Yellow</div>
    </div>
  </div>
  <div fxFlex class="box blue">Blue</div>
</div>

这种方式更符合Flex布局的设计逻辑，适合需要结合其他Flex属性的复杂场景。

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