如何使用ion-row和ion-col对齐离子2中的元素？

Question

我正在尝试获得类似于此处所示的列表:http: //arunsfolio.com/wp-content/uploads/2015/04/list-petro.png

我不确定我是否遗漏了某些东西.

这是代码:

 <ion-row>

    <ion-col width-40>
        <h4>Esso</h4>
        <p>Ungrester - 54</p>
        <p>84859 - munch</p>
    </ion-col>
    <ion-col width-40>
        <div class="priceStyle">
            <div class="priceChild">
                $123
            </div>

        </div>
    </ion-col>
    <ion-col width-10>
       <div>
        12KM
      </div>
    </ion-col>
</ion-row>


SCSS:
.priceStyle {
        background-color: lightblue;
        display: flex;
        flex-direction: column;

        width: 100px; 
        height: 50px; 
        border-radius: 2px;


    }

.priceChild {
        font-weight: bold;
        font-size: 1.5em;
        color: white;
        margin: 0;
        flex: 1;
        justify-content: flex-end;
        align-items: flex-end;
    }

我的代码没有对齐中心的元素.

这就是它现在的显示方式:

感谢您的帮助.

谢谢.

Answer 1

您可以使用以下属性:

display: flex;
justify-content: center;

在 <ion-row>元素上.