fxFlex 为子组件添加 100% 宽度答案

【问题标题】：fxFlex adding 100% width to the child componentsfxFlex 为子组件添加 100% 宽度
【发布时间】：2020-08-17 12:09:45
【问题描述】：

我正在使用 Flex Layout Angular，这很棒我已将 flex 添加到子组件<div fxFlex="100">，这使得 DIV 的宽度为 100%，但是，下面的组件宽度也是 100%。我不想对内部组件应用宽度。我怎样才能防止这种情况？？

<div fxLayout="column" fxLayoutAlign="center center">
    <mat-card>
        <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="center center">
            <div fxFlex="100"> ==============================> added 100% width to the div, which is fine
                <mat-form-field appearance="outline"> ==================> However, inner component is also added to 100% width it should be default
                    <mat-label>Make</mat-label>
                    <mat-select>
                        <mat-option>None</mat-option>
                        <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
    </mat-card>
</div>

【问题讨论】：

标签： html css angular flexbox angular-flex-layout

【解决方案1】：

在我找到工具 Layout demos 1 之前，我曾经遇到过同样的问题。

在那里我了解到为了防止子元素填充父元素的宽度，应该在子元素中使用该指令fxLayoutAlign =" start start "。

这个选项必须声明，因为 fxLayoutAlign 的默认值是 start stretch 在 css 中相当于

justify-content: flex-start;
align-items: stretch;
align-content: stretch;

这相当于元素的 max-width: 100% if flex-direction: column;否则最大高度：100%

在您的代码中，答案将是：

<div fxLayout="column" fxLayoutAlign="center center">
  <mat-card>
    <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="center center">
      <div fxFlex="100">

                            <!-- Change start here ? -->
        <mat-form-field appearance="outline" fxLayout="column" fxLayoutAlign="start start">
                            <!-- Change start here ?  -->
        
        
          <mat-label>Make</mat-label>
          <mat-select>
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </mat-card>
</div>

我对 stackverflow 的第一个回答?。

【讨论】：