Angular Flexbox：如何将最大宽度设置为div

Question

我正在使用Angular Flexlayout（基于FlexBox）为我的应用程序添加响应能力。

是否可以为HTML元素设置最大宽度？

示例：

<div fxFlex.gt-md="70" fxLayout.lt-lg="100"> 
<!-- I want this div to have a maximum width of 1750px. 
Setting max-width has no effect. How can I achieve this? -->
</div>

Answer 1

将max-width属性与!important一起使用：

<div fxFlex.gt-md="70" fxLayout.lt-lg="100" style="max-width: 100px !important"> 

Answer 2

解决方案是使用FxFlex标记的“收缩”和“增长”值。 成长：如何成长元素 收缩：如何收缩元素 初始值：初始值

示例：

fxFlex="grow shrink initial"
fxFlex="0 1 70" <- Will not grow, will shrink 1:1, initial value of 70%
fxFlex="0 1 1750px" <- Will not grow, will shrink 1:1, initial value of 1750px

Documentation here

Answer 3

说实话，我认为最简单的解决方案是添加CSS类：

<div class="content" fxLayout="row" fxFlexFill>
  <div fxFlex="15" class="max-width">
    first-section
  </div>
  <div fxFlex="30" class="sec2">
    second-section
  </div>
  <div fxFlex="55" class="sec3">
    third-section
  </div>
</div>

使用以下CSS类：

.max-width{
    background-color: red;
    max-width: 1750px;
}
.sec2{
    background-color: blue;
}
.sec3{
    background-color: yellow;
}