css - CSS Flexbox自适应布局和宽度百分比

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

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

在小屏幕上，我希望列在左下方换行。
使用angular/flex布局的Responsive API，我为小屏幕（600像素到959像素之间）添加了一个断点，容器元素上有fxLayout.sm="column"：

<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%。
有关此问题的示例，请参见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来显示低于某个维度的内容，而不是显式地设置断点？

最佳答案

angular flex布局响应api还具有gt-sm（大于small）属性。
为了避免添加每个屏幕大小的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（小于large）属性

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