[英]How to align elements in ionic 2 using ion-row and ion-col?
I'm trying to achieve a list similar to the one shown here: http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png 我正在尝试获得类似于此处所示的列表: http : //arunsfolio.com/wp-content/uploads/2015/04/list-petro.png
I'm not sure if I am missing something in sass. 我不确定我是否遗漏了某些东西。
This is the code: 这是代码:
<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;
}
My code isn't aligning the elements in the centre. 我的代码没有对齐中心的元素。
This is how it is displayed right now: 这就是它现在的显示方式:
Thanks. 谢谢。
You can use the properties: 您可以使用以下属性:
display: flex;
justify-content: center;
on the <ion-row>
element. 在
<ion-row>
元素上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.