CSS Flexbox响应式布局和％宽度

问题描述：

使用angular/flex-layout，我有一个简单的双列布局。CSS Flexbox响应式布局和％宽度

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

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

采用了棱角分明/柔性布局的Responsive 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将显示分为多个小部分。用于溶液的一个例子

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

我可以通过使用响应API（即fxFlex=""）明确地除去fxFlex解决此问题。

这有两个问题。首先，它感觉非常非常黑客。其次，假设我想为小型和超小型显示器相同的行为，我结束了：

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

CSS Flexbox响应式布局和％宽度

相关推荐