css: Aligning third button below first two top buttons-CodePudding

How do I get the third button below the first two buttons where they are flushed. So the top two buttons are aligned end to end with the third button.

.device-buttons {
  padding: 0em 1em 1em 0em
}

<div >
 <div >
   <button mat-raised-button
           color="primary"
           [disabled]="hasMaxDevices"
           matTooltip="{{disabledMessage || 'Add a single device'}}"
           (click)="addDevice()">Single Entry</button>&nbsp;
   <button mat-raised-button
           color="primary"
           [disabled]="hasMaxDevices"
           matTooltip="{{disabledMessage || 'Add multiple device'}}"
           (click)="batchDevices()">Batch Entry</button>
   <button mat-raised-button color="primary">Skip and Search Countries Only</button>
 </div>
</div>

CodePudding user response：

You can put the first two buttons in a flex-box container and either use space-between to justify the content so that the left side of the first button and right side of the second button align with the edges of the third button or set the flex-grow property on the buttons in the row to 1 so that they grow to fill the available space.

If using the space-between option, make sure to also set the width of the device-buttons div to be fit-content so that the flex-box only extends to the width of the third button.

Here's an example using flex-grow:

.devices {
  width: 20rem; /* for example */
}

.device-buttons {
  --button-spacing: 0.25rem;
  padding: 0em 1em 1em 0em;
}

.top-row {
   margin-bottom: var(--button-spacing);
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top-row button {
  flex-grow: 1;
}

.top-row button:first-child {
  margin-right: var(--button-spacing); 
}


.skip-button {
  width: 100%;
}

<div >
 <div >
   <div >
     <button mat-raised-button
             color="primary"
             [disabled]="hasMaxDevices"
             matTooltip="{{disabledMessage || 'Add a single device'}}"
             (click)="addDevice()">Single Entry</button>&nbsp;
     <button mat-raised-button
             color="primary"
             [disabled]="hasMaxDevices"
             matTooltip="{{disabledMessage || 'Add multiple device'}}"
             (click)="batchDevices()">Batch Entry</button>
   </div>
   <button mat-raised-button color="primary" >Skip and Search Countries Only</button>
 </div>
</div>

CodePudding user response：

Try this solution

.device-buttons {
    padding: 0em 1em 1em 0em
}
.device-buttons button:last-child {
    display: block;
    margin-top: 0.5rem;
}

<div >
 <div >
   <button mat-raised-button
           color="primary"
           [disabled]="hasMaxDevices"
           matTooltip="{{disabledMessage || 'Add a single device'}}"
           (click)="addDevice()">Single Entry</button>&nbsp;
   <button mat-raised-button
           color="primary"
           [disabled]="hasMaxDevices"
           matTooltip="{{disabledMessage || 'Add multiple device'}}"
           (click)="batchDevices()">Batch Entry</button>
   <button mat-raised-button color="primary">Skip and Search Countries Only</button>
 </div>
</div>