如何在 FlexLayout 中使用百分比答案

【问题标题】：How To Use Percent in FlexLayout如何在 FlexLayout 中使用百分比
【发布时间】：2021-08-19 09:25:44
【问题描述】：

<div id="outer" style="width: 300px; height:300px;">
    <div id="father" style="display:flex; height: 200px;width: 200px;background-color: black;margin-top: 100%;">
        <div id="child1"></div>
        <div id="child2"></div>
        <div id="child3"></div>
    </div>
</div>

我在容器中使用 FlexLayout，就像上面一样。正如它所看到的，fahrer 在 margin-top 中使用了一个百分比，我认为它将是 200px 但实际上是 300px。包含块是外部的。所以我该怎么做才能将 flex 更改为包含块。

【问题讨论】：

% 中的垂直填充或边距使用其父宽度作为参考。阅读规范以找出答案。 ;)

标签： html css angular-flex-layout

【解决方案1】：

&lt;div id="father" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px" fxFlex="50"&gt;

fxFlex 是宽度和高度的百分比

【讨论】：