我试图实现类似这里显示的一个列表: http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png如何使用离子排和离子排对准离子2中的元素?
我不知道如果我缺少的东西SASS。
这是代码:
<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;
}
我的代码不对准在中心的元素。
这是它是如何显示现在:
谢谢。在 <ion-row>
元素
display: flex;
justify-content: center;
:
您是否尝试过col或div中的文本中心类?查看http://ionicframework.com/docs/v2/theming/css-utilities/ –
这里的一些实用程序,谢谢你的帮助。 – Deepak