How to place the blocks under the slider, just like in the picture, using flexbox?

  • one
    As the saying goes, if you want to help, give a man a fishing rod and not a fish, here’s a game to study the flexbox model - flexboxfroggy.com - martdn
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Not flexbox, of course, but there is a good JavaScript library (Masonry) for creating various grid layouts: http://masonry.desandro.com/ .

Here is an example implementation for your needs: http://codepen.io/bzvyagintsev/pen/adRjEM

HTML

<div class="grid"> <div class="grid-sizer"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> </div>

CSS

  * { box-sizing: border-box; } /* ---- grid ---- */ .grid { background: #EEE; max-width: 1200px; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer, .grid-item { width: 20%; } .grid-item { height: 100px; float: left; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .grid-item--width2 { width: 40%; } .grid-item--height2 { height: 200px; }

Js

 $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true });