CODEWITHSUNDEEP
angularangular-material
Ben Donnelly
Ben Donnelly

Reputation: 1261

Angular Materials Cards Layout Issue

I am trying to position two cards next to each other.

The card on the left has display: flex so I can centre the contents of it.

I can't figure out how to make the next card, sit next to it without making the card on the left inline-block also.

Here is the initials component with the details component.

<mat-card class="card card-initials">
    <span>BD</span>
</mat-card>

<details-component></details-component>

Here is the CSS for that component. 

.card{
    padding: 0;
    width: 225px;
    margin: 15px 15px 0 15px;
}

.card-initials {
    display: flex;
    flex-wrap: nowrap;
    background-color: #D3DCE5;
    border-bottom: #afbfd0 1px solid;
}

.card-initials span {
    text-align: center;
    width: inherit;
    line-height: 225px;
    font-size: 72px;
}

Here is the details component, where I plan to have two cards, adjacent to the initials component. 

<mat-card>
    Personal Info
</mat-card>

Not sure what display properties to put on that.

Here is how it looks currently,

enter image description here

Here is how I would like it to look, so you get a better idea of what I'm aiming for:

enter image description here

Upvotes: 0

Views: 1317

Answers (1)

lxop
lxop

Reputation: 8595

Use angular flex-layout.

Wrap a div around your cards, with fxLayout="row":

<div fxLayout="row">
  <div>
    <mat-card class="card card-initials">
      <span>BD</span>
    </mat-card>
    <details-component></details-component>
  </div>

  <div fxLayout="column">
    <mat-card>details box 1</mat-card>
    <mat-card>details box 2</mat-card>
  </div>
</div>

Upvotes: 1

Related Questions