Question

我有一个使用Angular Material和Flex-box的角度网页。此页面将保留其比例的图形，因此设置了最大宽度以防止其占用过多垂直空间。我想将图的父div设置为仅占据子元素尽可能多的水平空间。我将使用具有fxLayout列并垂直拉伸的div填充其余水平空间。

当前

<div fxLayout="row">
    <div fxLayout="column" fxFlex>
        <app-graph></app-graph> //max-width: 1300px
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex="30" style="background-color: red;">

    </div>
</div>

更新

我越来越近了。我发现设置fxFlex =“ 0 1 1300px”给了我想要的第一个div行为。我不知道该为第二个div做什么，以便它继续填充剩余的空间。

<div fxLayout="row">
    <div fxLayout="column" fxFlex="0 1 1300px">
        <app-graph></app-graph>
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex="20" style="background-color: red;">

    </div>
</div>

Answer 1

这就是我想出想要的东西的原因。仍不完美，但保留了第一个组件的最小和最大大小。

<div fxLayout="row" fxLayout.lt-md="column" fxLayout="start stretch">
    <div fxLayout="column" fxFlex="0 1 1100px" style="margin: 0 5px;">
        <app-graph></app-graph>
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex style="border: black solid 1px; margin: 0 5px;">
        <p style="font-size: 4em">Stuff will go here</p>
    </div>
</div>

给孩子们弹性包装的尺寸

1 个答案: