Question

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

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

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

使用angular / flex-layout＆＃39; Responsive API，我在容器元素上为fxLayout.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%"属性仍然受到尊重，因此行重叠。 Top Row占据显示高度的35％，因为它之前占据了显示宽度的35％。

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

我可以通过使用响应式API（即fxFlex）明确删除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>

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

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

<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用于特定维度以下的显示，而不是明确设置断点？

Answer 1

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

为避免必须使用fxFlex=""值添加每个屏幕尺寸，您可以执行以下操作：

<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>

或者您可以使用lt-lg（小于大）属性并拥有

<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>

CSS Flexbox响应布局和％宽度

1 个答案: