CSS Flex Styling with floated elements

Question

I am trying to figure out how I can get a flex layout (or some other layout if flex is not the way to go) that will allow the WIDGET 4 and 6 in my example to float up underneath WIDGETS 1 and 3. Because WIDGET 2 is larger, it pushes the rest of them down to it's height. The solution needs to be flexible to allow for more WIDGET divs that would cause similar issues with content below them. I want all the WIDGETS to float up underneath the row above.

as a side note - all of my WIDGET divs are sortable using the jQuery UI sortable plugin - so the solution must allow them to "snap" into place after the sort as well.

How can I accomplish this?

#widgetWrapper {
  padding:10px 15px;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;  
}

.widget {
  width:33.3%;
  box-sizing:border-box;
  padding:10px 20px 10px 10px;
  position:relative;  
}

<div id="widgetWrapper">
     <div class="widget">
       <p><strong>WIDGET 1</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
     </div>
    <div class="widget">
       <p><strong>WIDGET 2</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
    </div>
    <div class="widget">
       <p><strong>WIDGET 3</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
    </div>
    <div class="widget">
       <p><strong>WIDGET 4</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
    </div>
    <div class="widget">
       <p><strong>WIDGET 5</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
    </div>
    <div class="widget">
       <p><strong>WIDGET 6</strong></p>
       CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
    </div>     
</div>

Are you looking for a pure CSS solution? If not [this](https://masonry.desandro.com/) might be useful as a starting point. — defteH, Sep 28 '17 at 14:21
If possible, pure CSS would be fantastic! I will look at your link too though to see what it entails. — Phil, Sep 28 '17 at 14:22
as a side note - all of my WIDGET divs are sortable using the jQuery UI sortable plugin - so the solution must allow them to "snap" into place after the sort as well. — Phil, Sep 28 '17 at 14:23
Similar question: https://stackoverflow.com/questions/41552009/how-to-make-masonry-layout-with-flexbox — sol, Sep 28 '17 at 14:27

Dillon Headley · Accepted Answer · 2017-09-28T15:34:41.353

2

Unfortunately this is not easily possible with display: flex. It is however with display: grid! The property you are looking for is grid-auto-flow: dense;

Here is an example: https://codepen.io/rachelandrew/pen/beBeKJ

It works by backfilling the gaps as items are placed on the grid.

Another option would be to use a javascript plugin like masonry.

edited Sep 28 '17 at 15:34

answered Sep 28 '17 at 14:27

Dillon Headley

36
3

1

Here is possibly a more accurate example https://codepen.io/enxaneta/pen/QpjvBx – Dillon Headley Sep 28 '17 at 14:29
As for browser support, most modern browsers support css grid. Edge doesn't other than the very latest. In these cases you could fall back to the flex layout you already have – Dillon Headley Sep 28 '17 at 14:55

CSS Flex Styling with floated elements

1 Answers1