Flexbox - render content in free space

Question

Is it possible to render custom element in free space of row ? I mean we have a row with 3 element.

For example: First and second are rendered and aligned to the right. They have diffrent width. And in free space on the left i want to render there a third element. I ask because i need to do smart css which will working like this above but in cases when the elements are on the right or one on left and another on the right.

Sure this can be done. Just post what you got so far and how your structure should be and I'm sure you gone get help with it, else... — Dejan.S, Jul 11 '17 at 11:16
Right now i cut my code to show the main things. And collect images to show how it should looks like. — Przemysław Zamorski, Jul 11 '17 at 11:26

score -2 · Answer 1 · answered Jul 11 '17 at 11:24

I'm not sure what you need but I hope this help, if you tell me exaclt what you need I can updated the code

.flex{
  display: flex;
  justify-content: space-between;
}

<div class="flex">
 
  
  <div>
   <span>element 3</span>
  </div>
  
  <div>
   <span>element 1</span>
   <span>element 2</span>
  </div>
</div>

score -2 · Answer 2 · answered Jul 11 '17 at 11:30

You should explain clearly what you want, anyway, i think its a good start for your case with 3 columns : FIDDLE

Html:

<div class="flex-col">

  <div class="col one">
  ONE
  </div>

  <div class="col two">
  TWO
  </div>

  <div class="col three">
  THREE
  </div>

</div>

Css:

.col { 
  box-sizing:border-box;
  padding:10px;
  background:blue;
  text-align:center;
  border:solid 1px red;
}

.one { flex-grow:4; }
.two { flex-grow:2; }
.three { flex-grow:1; }

Flexbox - render content in free space

2 Answers2