CSS弹性盒子响应式布局和百分比宽度

Question

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

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

在小屏幕上，我希望列能够换行，右侧在左侧下面。

使用 angular/flex-layout 的 响应式 API，我在容器元素上添加了一个小屏幕断点（在 600px 和 959px 之间），并使用 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>

请点击此处查看解决方案示例。

这种方法有两个问题。首先，它感觉非常的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来显示低于某个尺寸的内容，而不是显式地设置断点？

- Jack

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>

- DGarvanski