How to format this list in ionic? - html

Question

I have the following list that shows: one icon, a user pic, name, and 2 icons on the left.
I cannot align then properly in ionic, even when I add styling I cannot fix them.
Can you please give me a hint how to make this item be inline in the order I mentioned above?
<div class="list">
<a class="item item-icon-left item-icon-right" href="#" style="margin-top:40px;">
<i class="icon ion-person"></i>
<img class="circular-image" src="/Content/img/bill.jpg" />
<h2 style="display:inline; padding-left:10px;">F.joe</h2>
<i class="icon ion-chatbubble-working"></i>
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-person"></i>
<img class="circular-image" src="/Content/img/bill.jpg" />
<h2 style="display:inline; padding-left:10px;">F.joe</h2>
<i class="icon ion-chatbubble-working"></i>
</a>
</div>

Answer 1

I would suggest using Ionic's grid CSS component:
http://ionicframework.com/docs/components/#grid
Try something like this:
<ion-list>
<ion-item>
<div class="row">
<div class="col">
<i class="icon ion-person"></i>
</div>
<div class="col">
<img class="circular-image" src="/Content/img/bill.jpg" />
</div>
<div class="col">
<h2>F.joe</h2>
</div>
<div class="col">
<i class="icon ion-chatbubble-working"></i>
</div>
</div>
</ion-item>
</ion-list>
You can mess with the row and col classes to give your list your desired look and feel. For example "col col-25" will make that column take up 25% of the screen.

Answer 2

Another option is to use the flexbox to align the items inside the item, defining three sections .item-content-left, item-content-center (with flex-grow to expand) and .item-content-right
but for something simpler I would take Jake Stewart approach.
<div class="list">
<a class="item" href="#" >
<div class='item-content'>
<div class='item-content-left'>
<i class="icon ion-person"></i>
</div>
<div class='item-content-center'>
<img class="circular-image" src="/Content/img/bill.jpg" />
<h2 >F.joe</h2>
</div>
<div class='item-content-right'>
<i class="icon ion-chatbubble-working"></i>
<i class="icon ion-chatbubble-working"></i>
</div>
</div>
</a>
</div>
CSS
.item-content{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: flex-start;
-webkit-align-items: flex-start;
}
.item-content-left{
}
.item-content-right{
}
.item-content-center{
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: flex-start;
-webkit-align-items: flex-start;
}
http://jsfiddle.net/6Lvu98pb/3/