5

使用angular/flex-layout，我有一个简单的两列布局。

<div fxFlex fxLayout="row">
    <div fxFlex="35%">
        <!-- Left Column -->
    </div>
    <div fxFlex="65%">
        <!-- Right Column -->
    </div>
</div>

在小型显示器上，我希望列在左下方。

使用 angular/flex-layout 的Responsive APIfxLayout.sm="column" ，我在容器元素上为小屏幕（600px 和 959px 之间）添加了一个断点：

<div fxFlex fxLayout="row" fxLayout.sm="column">
    <div fxFlex="35%">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex="65%">
        <!-- Right Column, Bottom Row -->
    </div>
</div>

在小屏幕上，左列成为顶行，右列成为底行。

但是，fxFlex="35%"属性fxFlex="65%"仍然有效，因此行重叠。顶行占据了显示高度的 35% ，因为它之前占据了显示宽度的 35% 。

有关问题的示例，请参阅此 Plunker 。请注意，我使用fxLayout.xs断点而不是fxLayout.sm演示问题，因为 Plunker 将显示分成小部分。

fxFlex我可以通过使用响应式 API（即）显式删除来解决此问题fxFlex=""：

<div fxFlex fxLayout="row" fxLayout.sm="column">
    <div fxFlex="35%" fxFlex.sm="">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex="65%" fxFlex.sm="">
        <!-- Right Column, Bottom Row -->
    </div>
</div>

请这个 Plunker获取解决方案的示例。

这有两个问题。首先，感觉非常非常hacky。其次，假设我希望小型和超小型显示器具有相同的行为，我最终得到：

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
    <div fxFlex="35%" fxFlex.sm="" fxFlex.xs="">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex="65%" fxFlex.sm="" fxFlex.xs="">
        <!-- Right Column, Bottom Row -->
    </div>
</div>

除非有任何更简单的方法可以将响应式 API 用于特定维度以下的显示，而不是显式设置断点？

4

1 回答 1

10

angular-flex-layout 响应式 API 还具有gt-sm（大于小）属性。

To avoid having to add every screen size with an fxFlex="" value you can just do something like this:

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
    <div fxFlex.gt-sm="35%">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex.gt-sm="65%">
        <!-- Right Column, Bottom Row -->
    </div>
</div>

Or you can use the lt-lg (less than large) property and have 

<div fxFlex fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
    <div fxFlex="35%" fxFlex.lt-lg="">
        <!-- Left Column, Top Row -->
    </div>
    <div fxFlex="65%"  fxFlex.lt-lg="">
        <!-- Right Column, Bottom Row -->
    </div>
</div>
于 2017-10-13T08:31:48.463 回答