CSS Flexbox 响应式布局和 % 宽度

CSS Flexbox Responsive Layout and % widths

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

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

在小型显示器上,我希望列在左下方换行。

使用 angular/flex-layout 的 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% height,因为它之前占据了显示空间的 35% width.

有关问题的示例,请参阅 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获取解决方案示例。

这有两个问题。首先,感觉非常非常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 显示低于特定尺寸的显示,而不是明确设置断点?

angular-flex-layout Responsive 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>