CODEWITHSUNDEEP
javascripthtmlcssangularflexbox
Fearghal
Fearghal

Reputation: 11407

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

I have 2 divs with images in them inside my ng2-flex-layout in my html template. I want 1 of those divs to be on the extreme left and the other on extreme right of the page.

My Code:

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

I am using "@angular/flex-layout": "^2.0.0-beta.4",

I have tried layout-align="space-between center" but no impact.

Can anyone help please?

Upvotes: 9

Views: 17495

Answers (1)

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

First: flex-layout requires Angular v2.4.3 or higher, make sure you meet that dependency.

Second: This code renders the result you are asking for. fxLayout="row" and fxLayoutAlign="space-between center" on your flex-container and then tagging your children with flex-item is all you need.

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

Result: result

Upvotes: 12

Related Questions