Menu
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?
638
What is fxLayoutGap API? fxLayoutGap is used to specify gap between flex children items inside flex container. fxLayoutGap is an optional API. fxLayoutGap directive should be added to parent container i.e, flex container.
Syntax: The value space-between is used for displaying flex items with space between the lines. justify-content: space-between; The value space-around is used for displaying flex items with space between, before and after the lines.
Flexbox provides a clean, consistent way to build out a responsive layout. Its popularity and cross-browser support make it a great resource to implement into your current or future projects.
fxLayout defines the flow of children elements along the main-axis or cross-axis, inside the flex container. Depending upon our layout we can pass four different values to the fxLayout attribute row,column, row-reverse and column-reverse. In addition to the fxLayout accepts other parameters like wrap and inline.
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:
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
