如何根據屏幕尺寸製作@ angular/flex-layout wrap

我有3個div，我可以根據屏幕尺寸製作更大或更小的屏幕，但無法像引導一樣將其打包。所以對於小屏幕我想要div垂直堆疊，大屏幕水平。例如任何人都知道我如何用Angular2做到這一點？我選擇了使用@nmp'd的@ angular/flex-layout。如何根據屏幕尺寸製作@ angular/flex-layout wrap

注意：我不認爲有任何與'任何東西'相沖突的'彩盒'。

這裏是我的代碼...

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    //templateUrl: './app/app.component.html', 
    template:` 

<div class="flex-container" fxFlex=100> 
     <div class="colored box" > 
     <div fxFlex.lg=100 fxFlex.md=50> flexible for screensize </div> 
     <div fxFlex.lg=100> fxFlex </div> 
     <div fxFlex=33> fxFlex </div> 
     </div> 
    </div> 
    <div class="version">@angular/flex-layout (v2.0.0-beta.0)</div> 
    `, 
    styleUrls: ['./app/app.component.css'] 
}) 
export class AppComponent { 

}

來源

2017-01-29 Fearghal

你可以使用fxLayout/fxLayout.xs屬性在不同的分辨率指定的佈局格式。其中fxLayout可以接受column/row值。

column：除法計算將垂直髮生。

row：除法計算會水平發生。

如果你想針對剛過 fxLayout像fxLayout.xs="column"

<div class="flex-container" 
    fxLayout="row" 
    fxLayout.xs="column"> 
    <div class="flex-item" fxFlex=50> flexible for screensize </div> 
    <div class="flex-item" fxFlex=33> fxFlex </div> 
    <div class="flex-item" fxFlex=33> fxFlex </div> 
</div>

來源

2017-01-29 16:53:45

感謝潘卡任何具體決議提到它...我是在一個陡峭的學習曲線的起點，你能解釋一下這個是幹什麼？ – Fearghal

更新後...好吧我想我越來越...似乎比Bootstrap更復雜，它自動包裝基於屏幕大小的組件。你能給我一些代碼來實現我的大屏幕水平div和小屏幕垂直div嗎？ – Fearghal

@Fearghal你可以檢查在線示例[這裏]（https://tburleson-layouts-demos.firebaseapp.com/#/responsive），將窗口的分辨率更改爲小div後會垂直顯示。 –

如何根據屏幕尺寸製作@ angular/flex-layout wrap

回答

相關問題