问CSS垂直对齐生成的纯文本

EN

.container-1{
  display:flex;
  flex-direction: column;
}

.box-1{
  flex:1
}

.container-2{
  display:flex;
  flex-direction: row;
}

<div class = "container-1">
    <div class="box-1">
        <div class="box-1">E |</div>
        <div class="box-1">A |</div>
        <div class="box-1">D |</div>
        <div class="box-1">G |</div>
        <div class="box-1">B |</div>
        <div class="box-1">E |</div>
      </div>
  <div class = "container-2" *ngFor="let currentTab of tabs;">
    <div *ngIf="currentTab.string == 0; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 1; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 2; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 3; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 4; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
    <div *ngIf="currentTab.string == 5; then thenBlock else elseBlock"></div>
    <ng-template class="box-1" #thenBlock>{{currentTab.tab}}</ng-template>
    <ng-template class="box-1" #elseBlock>-</ng-template>
  </div>
</div>