Display some items inside a flexbox column as row - html

Question

I have some flexbox item and it look like this https://jsfiddle.net/19ohjvuf/
This is the html
<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>
here streetShow On Map2.7km from centre</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">Very Good</div>
</div>
and this is the 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 want the links inside .grow-this to arrange in a horizontal manner(row). I have tried changing flex-direction to be row
flex-direction:row;
and still they still stack as columns.
What can i do to make the links arrange themselves horizontally?

Answer 1

Instead of flex-flow: row; on .item-element you need to set the container those elements are children of to be flex-direction: row. That is the default value when an element is set to display: flex; so simply remove flex-direction: column; to make .grow-this display its children in a horizontal row:
https://jsfiddle.net/sm36ovxb/1/
Or, if you want .grow-this to be a column, but just have the links display next to each other in a nested row then you could wrap them in another <div> (or a <ul>) and set that to a flex row like this:
https://jsfiddle.net/xgpvmqo9/

Answer 2

Try this: flex-flow: row wrap;
#property {
width: 100% !important;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
justify-content:space-between;
}