2

Is it possible to position items in a flexbox like this? enter image description here

I've tried flex-flow: column wrap, but it'll require fixed height. Which isn't available for this case.

Any other way other than flexbox? Any idea or direction will be really appreciated.

I can use some javascript if required, but can't use any library. And I can't modify html.

Thanks.

Edit: Item #3 and #4 is supposed to be a sidebar with adjustable width.

Is this approach too bad if there are contents inside each item?

html:

    <div id="parent">
      <div class="some-class">Item 1</div>
      <div class="some-other-class">item 2</div>
      <div class="sidebar">item 3</div>
      <div class="sidebar">item 4</div>
      <div class="no-class">item 5</div>
      <div class="else">item 6</div>
    </div>

css:

#parent{
  display: flex;
}
#main{
  width: 70%;
}
#sidebar{
  width: 30%;
}

js:

$(document).ready(function(){
  $('<div>', {
    id: 'main',
  }).appendTo('#parent');

  $('#parent').children().appendTo('#main');

  $('<div>', {
    id: 'sidebar',
  }).appendTo('#parent');
  
  $('#main .sidebar').appendTo('#sidebar');
});

https://jsfiddle.net/a4gh6fq0/

DtyCFx
  • 61
  • 1
  • 8
  • can you use a CSS grid for the project? if yes go for a `grid` layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout (the easiest way, no library) – Laaouatni Anas Oct 22 '22 at 21:48
  • 1
    @LaaouatniAnas , CSS-Grid will not do this design with differently sized box heights. CSS-Grid masonry is only supported by Firefox with beta functions activated. – tacoshy Oct 22 '22 at 21:50
  • @tacoshy thanks to point that masonry support now isn't that great – Laaouatni Anas Oct 22 '22 at 21:52
  • @tacoshy yes, that's the main problem, the heights are not fixed, or equal. – DtyCFx Oct 22 '22 at 21:55
  • 1
    @DtyCFx I found it with flexbox only, I can't answer but I will add a jfiddle https://jsfiddle.net/w5cLajrn/1/ (no grid) – Laaouatni Anas Oct 22 '22 at 22:24
  • 1
    @DtyCFx here image of results: https://i.stack.imgur.com/RCugz.png – Laaouatni Anas Oct 22 '22 at 22:26
  • @LaaouatniAnas Thanks for taking the time to research for me. I may have not explained my situation clearly. This is not for images and I am not looking for a masonary layout. item #3 and #4 are actually a sidebar. In your example, I can not adjust column width and there is max-height for the container. so it'll never actually wrap into another column. – DtyCFx Oct 23 '22 at 10:22
  • is this approch too bad if there are contents inside each item? https://jsfiddle.net/a4gh6fq0/1/ – DtyCFx Oct 23 '22 at 10:57

0 Answers0