CSS Flexbox 响应式布局和 % 宽度

Posted 2023-03-06

【中文标题】CSS Flexbox 响应式布局和 % 宽度

【英文标题】：CSS Flexbox Responsive Layout and % widths

【发布时间】：2017-11-05 08:32:42

【问题描述】：

使用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%" 属性仍然有效，因此行重叠。顶行占据了显示 height 的 35%，因为它之前占据了显示 width 的 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获取解决方案示例。

这有两个问题。首先，它感觉非常非常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 用于特定维度以下的显示，而不是显式设置断点？

【参考方案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>