@ angular/flex-layout 'space-between' layout

Question

私のhtmlテンプレートのng2-flex-layoutの中に2つのdivがあります。私はそれらのdivの1つがページの極端な左側と極端な右側にあることを望みます。

マイコード：

<div class="flex-container" 
    fxLayout="row" 
    fxLayout.md="column" 
    fxLayout.sm="column" 
    fxLayout.xs="column" 
    fxLayoutAlign="space-between center"> 
    <div class="flex-item" fxLayoutAlign="left" fxFlex=50> <img></img></div> 
    <div class="flex-item" fxFlex=50><img></img></div> 
</div> 

私はlayout-align="space-between center"が、まったく影響を試してみました"@angular/flex-layout": "^2.0.0-beta.4",

を使用しています。

誰でも助けてください。

Answer 1

最初に：フレックスレイアウトには、角度v2.4.3以上が必要です。その依存関係を満たしていることを確認してください。

第2：このコードは、あなたが求めている結果をレンダリングします。 flex-containerのfxLayout="row"とfxLayoutAlign="space-between center"を入力し、子供にflex-itemというタグを付けてください。

<div class="flex-container" 
    fxLayout="row" 
    fxLayoutAlign="space-between center"> 
    <div class="flex-item"> 
    <img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png" /> 
    </div> 
    <div class="flex-item"> 
    <img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png" /> 
    </div> 
</div> 

結果：