對齊按鈕文本和其他離子-COL文本底部在離子2

Question

我的代碼看起來像：

<ion-row><ion-col ><button ion-button outline no-padding large (click)="setUserName()">D</button>ay in the life </ion-col></ion-row> 

爲字母d進入在中間和整體山口文本上方的位這看起來難看。

所有我想要的是一切底部對齊。

Answer 1

發生了什麼？

.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0; 
 
    min-height: 1px; 
 
    -webkit-flex-basis: 0; 
 
    -ms-flex-preferred-size: 0; 
 
    flex-basis: 0; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    max-width: 100%; 
 
}

<ion-row class='row'> 
 
    <ion-col class='col'><button ion-button outline no-padding large (click)="setUserName()">D</button>ay in the life </ion-col> 
 
</ion-row>