The task is to build blocks as in the picture, provided that the blocks in additional containers cannot be wrapped - the adaptive means moving the blocks relative to each other ... The question is, is it possible to do this on flexs without some additional tricks? enter image description here

    1 answer 1

    I could not do it on clean flexes without a hack with a negative margin, but I managed to do it with rubber. Maybe it will help you: http://codepen.io/rqrqrqrq/pen/WxxLQG , you can stretch the container.

    .block4 { margin-left: calc(-25% + 5px); } .container { display: flex; flex-flow: column wrap; justify-content: flex-end; }

    Complete code:

     .container { outline: 2px solid #555; height: 300px; width: 400px; display: flex; flex-flow: column wrap; justify-content: flex-end; resize: both; overflow: auto; } .block { box-sizing: border-box; background: #48f; margin: 5px; padding: 10px; font-size: 30px; color: #fff; } .block1 { width: calc(50% - 10px); height: calc(100% - 10px); } .block2 { width: calc(50% - 10px); height: calc(50% - 10px); } .block3, .block4 { width: calc(25% - 10px); height: calc(50% - 10px); } .block4 { margin-left: calc(-25% + 5px); } 
     <div class="container"> <div class="block block1">1</div> <div class="block block2">2</div> <div class="block block3">3</div> <div class="block block4">4</div> </div>

    • beautiful example! - user33274