为什么内容会从Flex容器中消失?

时间:2017-09-25 06:53:58

标签: angular angular-material2 typescript2.0 angular-flex-layout

HY, 我有以下结构:

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-around start" fxLayoutGap="2%" style="padding:2%;">


    <div fxFlex style="line-height:2;">

        <md-card>

                <md-card-content>

                   <div [outputext]="textt"></div>

                </md-card-content>


            </md-card>


    </div>


    <div fxFlex fxFlexFill style="margin-right:30px;">

        <md-card>

            <md-card-content>

                <div [outputext]="text"></div>

            </md-card-content>

        </md-card>

    </div>

</div>

现在由于某种原因,它只能在桌面浏览器和一些旧的移动设备上运行(如预期),但内容在一些新手机上的灵活容器中消失。任何人都可以提出任何建议并解释为什么会这样? 我期望的是宽屏幕上的一行和小屏幕上的一列。 我使用flex-layout作为我的网站布局(并重新安排)。 所以现在我开始考虑选择flex-layout进行网站布局是否正确。 我已经通过更改屏幕更改的md-grid-list属性阅读了一些使用cols的解决方案,但我对此表示怀疑,因为我看到它需要一些额外的代码来确定屏幕更改的时刻,因为网格列表没有自己做。

1 个答案:

答案 0 :(得分:0)

关于浏览器兼容性的全部内容。如果他们支持 CSS Flexible Box Layout Module ,他们将正确运行您的代码。

我刚才所说的是在项目的官方GitHub页面中写的here

角度的Flex布局仍然不稳定且相对较新,很多仍然可以改变。如果您只是检查additions and deletions graph,您可以看到上个月发生了很多变化。很难说继续使用flex-Layout是否有利可图,或者只是用更稳定的东西进行更改。