@ angular / flex-layout'space-between 'レイアウト
Fearghal
HTMLテンプレートのng2-flex-layout内に画像を含む2つのdivがあります。これらのdivの1つをページの左端に、もう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>
私は使っている "@angular/flex-layout": "^2.0.0-beta.4",
試しましたlayout-align="space-between center"が、影響はありません。
誰か助けてもらえますか？
フレドリック・ランディン
まず、 flex-layoutにはAngularv2.4.3以降が必要です。その依存関係を満たしていることを確認してください。
2番目：このコードはあなたが求めている結果をレンダリングします。fxLayout="row"そしてfxLayoutAlign="space-between center"あなたにflex-containerそしてあなたの子供にタグを付ける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>
結果： 
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Angular flex-layout struggle
- 2
angular flex layout grid system
- 3
Angular 2Flexレイアウトアイコンを右揃え
- 4
Angular 9へのアップグレード-@ angular / flex-layoutピアの依存関係を@ angular / cdkに
- 5
Angular2 Material ResponsiveSidenavとflex-layout
- 6
Angular、Material、Flex-Layoutのmat-progress-spinnerを中心としたオーバーレイテキスト
- 7
Angular Flexは、アイテムを同じ行に配置できません。Angular8.2.1とFlex-Layout 8.0.0.beta 26
- 8
@ angular / flex-layoutハウツー：画面サイズに基づいて異なるクラス？
- 9
Angular5マテリアルフレックスレイアウトfxLayoutAlign = "space-evenlycenter"が機能しない
- 10
flex justify-content：space-betweenが機能しない
- 11
Angular2アニメーションを使用してflex-layoutを変更するには?
- 12
画面サイズに基づいて@angular / flex-layoutラップを作成する方法
- 13
How do I turn off flex layout for a hidden Angular Material class
- 14
Angular Flex Layoutで垂直方向に中央揃えする方法は？
- 15
Angular Material2タブにflex-layoutを入力します
- 16
How to Line break in angular flex-layout so component will display in the new line
- 17
"angular-flex-layout" not adding margin for "mat-form-fields" on mobile screens
- 18
Overlay text centered in mat-progress-spinner on Angular, Material and Flex-Layout
- 19
fxLayout = "row" @ angular / flex-layout "：" 2.0.0-beta.1 "およびangularmaterial2
- 20
@ angular / flex-layout、@ angular / material、画像付きのマットカードを使用したレスポンシブグリッド？
- 21
Angular 8、Angular Flex Layout：this._delegate.setClassは関数ではありません
- 22
相対レイアウト-layout_toRightOf
- 23
node_modules/@angular/flex-layout/extended/typings/style/style.d.tsのエラー
- 24
Angular Flex Layout refuses to center container horizontally, applied directives to div, router outlet, everything, yet it still wont center
- 25
How to Reduce Space in DIV using Using Flex
- 26
ReactNativeのサイズ変更可能なFlexレイアウト
- 27
制約レイアウトの相対レイアウトのlayout_above？
- 28
Space between image and text
- 29
React Native Flex Layout With Absolute Size
コメントを追加