为什么内容从柔性容器中走出来？

问题描述：

<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容器的一些新的手机。任何人都可以提出任何建议并解释为什么是这样吗我期望的是在宽屏幕上的一行和在小屏幕上的一列。我使用flex-layout作为我的网站布局（并重新安排）。所以现在我开始考虑如果我做了正确的选择flex-layout的网站布局。我已经阅读了一些解决方案，通过在屏幕更改上更改cols属性来使用md-grid-list，但我对此有所怀疑，因为我看到它需要一些额外的代码来确定屏幕更改的时刻，因为网格列表不会自行完成。

答

这全是关于浏览器兼容性。如果他们支持CSS灵活框布局模块他们将正确运行您的代码。

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

角度的Flex布局仍然不稳定，相对较新，很多仍然可以改变。如果你只是检查additions and deletions graph你可以看到很多只是在上个月改变。很难说如果继续使用flex-Layout还是有利可图的，或者只是更稳定地进行更改。

为什么内容从柔性容器中走出来？

相关推荐