1

I'm trying to use flex box to stack rows of different sized divs on top of each other, so that they fill in the empty space.

If you run the below code, i'm trying to get box 5 and 6 to move into the empty space above.

Any ideas of how this could be achieved?

Thanks in advance, Alex

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flex-item {
  width: 30%;
  border: 1px solid;
  margin: 10px auto;
}
<html>

<head>
  <title>testing flex box</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">
      <ul>
        <li>1</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>2</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>3</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>4</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>5</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>6</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>

        <li>7</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
  </div>
</body>
</html>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Alex W
  • 91
  • 9
  • no, that's not possible, since flex-wrap distributes the items into rows (or columns, but here into rows), and the items in those rows can't go `*out* (i.e. vertically above or below) of those rows. – Johannes Apr 28 '17 at 23:32
  • to my knowledge, you aren't able to achieve this with FlexBox since your flex container can only be set to Row or Column - FelxBox is only 1 dimensional. If you wanted to have 2 dimensions (Row and Column), you would have to use a Grid such as the new CSS Grid. – Mike Diglio Apr 28 '17 at 23:33
  • you can create "masonry" like layouts using columns, but the content is ordered in columns, not rows http://w3bits.com/css-masonry/ and then there is always real masonry to do this http://masonry.desandro.com/ – Michael Coker Apr 28 '17 at 23:40

1 Answers1

1

The closest thing you are looking for in CSS would be column CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

example

.flex-container {
  column-count: 3;
  column-fill: balance;
}

.flex-item {
  display: inline-block;/* avoid to break through columns */
  width: 100%;
  border: 1px solid;
  margin: 10px auto;
}
<html>

<head>
  <title>testing flex box</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">
      <ul>
        <li>1</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>2</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>3</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>4</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>5</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>
        <li>6</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
    <div class="flex-item">
      <ul>

        <li>7</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
      </ul>
    </div>
  </div>
</body>

</html>

  • flex is not able to do this

  • grid will require to span elements through rows, you need to know their size to set amont of rows to span. example below, change amount of children or content and see it breaking , hover the snippet to see it happen

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0px;
}

.item {
  border: solid;
  margin: 10px;
}

.item:nth-child(1) {
  grid-row: span 3;
}

.item:nth-child(2) {
  grid-row: span 1;
}

.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(5) {
  grid-row: span 2;
}

/* break it */
html:hover .item {font-size:1.5em}
html:hover .item:nth-child(3n) {font-size:.75em;}
html:hover .item:nth-child(5) {display:none;}
<div class="container">
  <div class="item">
    <ul>
      <li>1</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>2</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>3</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>4</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>5</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>6</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
  <div class="item">
    <ul>

      <li>7</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
      <li>content</li>
    </ul>
  </div>
</div>
  • The masonry javascript is the thing to use actually :)
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129