Check out my flexbox item and how it appears here
This is the html code:
<div id="property">
<div style="background-color:coral;"><img :src="item.property_image" width="200px" height="200px" /></div>
<div class="grow-this" style="background-color:lightblue;"><h3 class="mt item-element">{{item.property_name}} {{item.property_star_rating}}</h3>
<a href="" class="item-element">here street</a><a href="" class="item-element">Show On Map</a><a href="" class="item-element">2.7km from centre</a></div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">Very Good</div>
</div>
Here's the corresponding css:
#property {
width: 100% !important;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row;
}
#property div {
flex-basis: 200px;
height: 200px;
}
.mt{
margin-top:0px;
}
.grow-this{
flex-direction:column;
display: flex;
flex-grow: 1 !important;
}
.item-element{
margin-left:1% !important;
flex-flow: row;
}
I'm trying to make links inside .grow-this appear horizontally, but they are stacking vertically instead of in a row. I've already tried changing the flex-direction, but it's not working.
flex-direction:row;
Any suggestions on how can I get these links to align horizontally?