Angular Flexbox：如何设置 div 的最大宽度答案

【问题标题】：Angular Flexbox: how to set max width of a divAngular Flexbox：如何设置 div 的最大宽度
【发布时间】：2022-01-29 15:39:15
【问题描述】：

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

是否可以将 max-width 设置为 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>

【问题讨论】：

您是否尝试将您的 CSS 文件链接到 Angular CSS 文件下方？

标签： html css angular flexbox

【解决方案1】：

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

例子：

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

【讨论】：

漂亮的解决方案。谢谢！

【解决方案2】：

说实话，我认为最简单的解决方案是添加一个 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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

正如问题中指出的那样：设置'max-width'没有效果。甚至没有 !important 标签
你用!important了吗
他们只是声称即使使用!important也不起作用