Fill in empty horizontal space in flex container (css flexbox)

Question

I have flex layout as follows :

HTML

<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button type='button' onclick="add()" class="add">Add element</button>
  <div class="flex-container">
  <div class="flex-child">1</div>
  <div class="flex-child">2</div>
  <div class="flex-child">3</div>
  <div class="flex-child">4</div>
  <div class="flex-child">5</div>
  <div class="flex-child">6</div>
  <div class="flex-child">7</div>
  <div class="flex-child">8</div>
  <div class="flex-child">9</div>
  <div class="flex-child">10</div>
  <div class="flex-child">11</div>
  <div class="flex-child">12</div>
  <div class="flex-child">13</div>
  <div class="flex-child">14</div>
  <div class="flex-child">15</div>
  <div class="flex-child">16</div>
  <div class="flex-child">17</div>
  <div class="flex-child">18</div>
  <div class="flex-child">19</div>
  <div class="flex-child">20</div>
</div>
</body>

CSS

.flex-container{
  width: 500px;
  background-color: lightgrey;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  align-content: flex-start;
}
.flex-child{
  background-color: yellow;
  width: 100px;
  height: 100px;
  margin: 10px;
}
.temp{
  border: 1px dashed black;
}

JS

var counter = 20;
function add(event){
  counter++;
  $('.flex-container')
    .append("<div class='flex-child'>"+counter+"</div>")
}

$(document).ready(function(){
  $('.flex-child').resizable({
    grid: 120,
    helper: "temp"
  });
})

I want to stack columns 4 and 5 below column 3 (from image)

Is this possible using flexbox? If yes, please suggest missing bits, and If no, what should I use for such expected behaviour? CSS Grid layout (not mature) or bootstrap grids? (Need this working on IE 10+ as well)

Link to JSBin

With flexbox, you can't make flex items wrap under other items *in the same row*. Your items 1, 2 & 3 are all in one row. Item 4 must wrap to the *next row*, because flexbox works along horizontal and vertical lines. — Michael Benjamin, Apr 25 '17 at 17:07
One option is to wrap items 2, 3, 4 & 5 in their own container. Then, as a block, they can be a sibling to 1. — Michael Benjamin, Apr 25 '17 at 17:08
Ok, so when I resize any item from any row, I need to wrap remaining items from that row, and (optionally) wrap items from next row (if resultant wrap fits in remaining space from 1st row), and this too, I need to do dynamically (after resizing is done!). Seems tedious!! Any other approach? (Perhaps using only float) — Awadhoot, Apr 25 '17 at 17:15

Fill in empty horizontal space in flex container (css flexbox)

HTML

CSS

JS

I want to stack columns 4 and 5 below column 3 (from image)

0 Answers0