CODEWITHSUNDEEP
htmlcssflexbox
DevOverflow
DevOverflow

Reputation: 39

Combining 'order' with flexbox 'row-reverse' to achieve desired dynamic layout

I am trying to achieve a container which wraps from looking like this:

<div style='display: flex; flex-wrap: wrap; width: 100px; border: 1px solid !important;'>
  <div class='title' style='border: 1px dotted;'>Title text long</div> 
  <div class='size' style='border: 1px dotted;'>Large</div>  
  <div class='price' style='margin-left: auto; border: 1px dotted;'>£4.00</div>
</div>

enter image description here

To look like the below when the title is shorter

enter image description here

One method I had hoped would work is to use a type of row-reverse on the main flex container, and a order: -1; on the title div, but the order doesn't override the row-reverse. I've been playing around with options for a while now and am beginning to wonder if its even possible with CSS-only. A JS solution would still be useful, but CSS-only would be much preferred, if even possible.

Upvotes: 1

Views: 95

Answers (1)

Temani Afif
Temani Afif

Reputation: 272817

If you can adjust the HTML code, float can do it:

.box {
  width: 100px;
  border: 1px solid ;
  overflow:auto; /* to clear float */
}

.box > * {
  border:1px dotted;
  float:left;
}

.box > .price {
  float:right;
}

.size {
  clear:left;
}
<div class="box" >
  <div class='title' >Title text long</div>
  <div class='price' >£4.00</div>
  <div class='size' >Large</div>
</div>

<div class="box" >
  <div class='title' >Title text</div>
  <div class='price' >£4.00</div>
  <div class='size' >Large</div>
</div>

<div class="box" style="width:250px;">
  <div class='title' >Title text</div>
  <div class='price' >£4.00</div>
  <div class='size' >Large</div>
</div>

Upvotes: 1

Related Questions