CODEWITHSUNDEEP
htmlcssflexbox
Gandalf
Gandalf

Reputation: 13693

Display some items inside a flexbox column as row

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>
              <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>

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?

Upvotes: 0

Views: 1384

Answers (2)

Aaron Sarnat
Aaron Sarnat

Reputation: 1235

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/

Upvotes: 2

Sardor JS
Sardor JS

Reputation: 56

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;
}

Upvotes: 1

Related Questions