CSS Flexbox響應式佈局和％寬度

Question

使用angular/flex-layout，我有一個簡單的雙列布局。

<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，而不是設置斷點明確任何更簡單的方法？

Answer 1

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>