Angular 2 Material and Flex-Layout Alignment

Angular FlexLayout alignment issue

This is closer to your desired layout, but there are definitely some questions about how you are trying to lay this out. Especially in regards to your rows and that it seems like you are trying to lay out the parts in a table even while you are asking about flex. Hopefully this will at least give you a better starting point.

https://stackblitz.com/edit/angular-c422vx?file=src%2Fapp%2Fapp.component.css

Angular Material FxLayout - align one button on the left and one on the right

Using angular-flex-layout

<div fxLayout="row" fxLayoutAlign="space-between center">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>

Using CSS

.space-between-container {
  border: 1px solid #808080;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.flex-container {
  border: 1px solid #808080;
  display: flex;
}

.spacer {
  flex: 1 1 0;
}

<div class="space-between-container">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>
<div class="flex-container">
  <button> Other button</button>
  <span class="spacer"></span>
  <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
  <button mat-raised-button color="primary" (click)="save()">
        Save</button>
</div>

Angular Flex Layout row wrap with grid align not working

Here is the solution, updated code can be accessed at stackblitz. Basically we need to wrap a div around mat-card and add fxFlex with percentage. In my case I had set it to 25 so that 4 cards come in first raw.

<div class="cards-container" style="width: 100%; syntax: 100%;">
  <div
    fxLayout="row wrap"
    fxLayoutAlign="start start"
    fxLayoutGap="32px 12px grid"
  >
    <ng-container *ngFor="let item of cards">
    <div fxFlex="25">  
      <mat-card>
        <mat-card-header>
          <mat-card-title>{{ item }}</mat-card-title>
          <mat-card-subtitle>subtitle</mat-card-subtitle>
        </mat-card-header>
        <img
          mat-card-image
          height="240px"
          width="240px"
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          alt="Photo of a Shiba Inu"
        />
        <mat-card-content> </mat-card-content>
        <mat-divider inset></mat-divider>
        <mat-card-actions>
          <button mat-button>Ok</button>
        </mat-card-actions>
        <mat-card-footer>
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </mat-card-footer>
      </mat-card>
    </div>
    </ng-container>
  </div>
</div>

FlexLayout Angular and align items in one line on start as well as on the end

Could be like this?

<mat-card fxLayout="row">
  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="50"     fxLayoutGap="5px">
      <button mat-raised-button color="accent" (click)="newRows()">Add</button>
      <button [disabled]="selectedRow != undefined && selectedRow.isBevoorschotting" mat-raised-button color="accent"
        (click)="updateRows()">Update</button>
      <button mat-raised-button color="warn" (click)="deleteRows()" [disabled]='!isAdmin'>Delete</button>
      <button mat-raised-button color="accent" (click)="refresh(0)">Refresh</button>
  </div>
  <div fxLayout="row"  fxFlex fxLayoutAlign="end center">
      <mat-checkbox (change)="onclickMutatieVelden()" [(ngModel)]="toonMutatievelden">
        <p>Mutatie velden aan...</p>
      </mat-checkbox>
      <mat-checkbox (change)="onclickMaakInactief()" *ngIf="selectedRow" [(ngModel)]="!selectedRow.isActief">
        <p>Maak Inactief...</p>
      </mat-checkbox>
  </div>
</mat-card>

https://stackblitz.com/edit/flex-layout-angular-material-gxew4y?embed=1&file=app/app.component.html

Angular 2 Flex Layout Align Icon Right

You could add an empty span of flexible length in between:

<md-card>
  <md-card-header>
    <md-card-title>Swap Card</md-card-title>
    <span fxFlex></span>
    <md-icon>add_a_photo</md-icon>
  </md-card-header>
  <md-card-content>
  </md-card-content>
</md-card>

align Div item with flex-layout (fxlayout) not working

i´m testing You problem because is interesting for me, and result is like below.

the code is:

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign="center stretch" style="margin-top: 34px;">
  <div fxFlex="75" style="background-color: aquamarine; padding: 24px;">

    <div fxLayout="row">
      <div fxFlex="100" fxLayoutAlign="center" style="background-color: rgb(42, 165, 48); padding: 24px;">
        <h2>Radio button</h2>
      </div>
    </div>

    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
      <div fxFlex="50" style="background-color: rgb(236, 203, 203); padding: 24px;">
        <h2>Option 1</h2>
      </div>
      <div fxFlex="50" style="background-color: rgb(149, 155, 236); padding: 24px;">
        <h2>Option 2</h2>
      </div>
    </div>
  </div>

  <div fxFlex="25" style="background-color: rgb(164, 226, 206); padding: 24px;">
    <h2>Right Column</h2>
  </div>
</div>

and mobile view:

Is this what You looking for?

For only radio Try this:

<div fxLayout="row">
      <div fxFlex="100" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px"
        style="padding: 16px;">
        <label id="radio-group-label" fxLayoutAlign="center" style="background-color: coral;">Affrontement entre
          :</label>
        <mat-radio-group aria-labelledby="radio-group-label2" fxLayoutAlign="center">
          <mat-radio-button class="radio-button" value="s" checked="true" style="margin-right: 16px;">
            Concession à marquer
          </mat-radio-button>
          <mat-radio-button class="radio-button" value="p">Équipe à marquer</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>

And this is result: Screen and mobile:

---

Related Topics