how to fill blank spaces in flex box in html-CodePudding

How do I fill the gap using CSS where boxes take up blank spaces automatically? Each box could be of different size. How do I fit boxes automatically as screen size changes?

.c1 {
  display: flex;
  flex-wrap: wrap;
}

#i1 {
  height: 220px;
  width: 100px;
  background-color: cornflowerblue;
  margin: 10px;
}

.c2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  margin: 10px;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div id="i1"></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div id="a"></div>

</body>

CodePudding user response：

I developed a solution using the height of the container. It is necessary to use the required number of items so that they fit exactly in the columns. But this solution does not cause any space inside the container.

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}

.flex-item {
  width: 100px;
  height: 90px;
  margin: 10px;
  flex: 0 0 90px;
  background-color: blue;
}

.flex-big-item{
  background-color: cornflowerblue !important;
  flex-basis: 200px;
  width: 100px;
}

<div >
  <div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div>
  <div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div>
  <div ></div><div ></div><div ></div><div ></div><div ></div><div ></div><div ></div>
</div>

CodePudding user response：

I know the question is about flex, but there is no solution for this using flex, so my snippet below is just a solution under certain cirumstances: If the "double-heigth" elements only appear at the very left (i.e. in situations where the number of elements per line will not change), you can simply use float:left on all child elements of your container.

.c1 * {
  float: left;
}

#i1 {
  height: 220px;
  width: 100px;
  background-color: cornflowerblue;
  margin: 10px;
}

.c2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  margin: 10px;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div id="i1"></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div id="a"></div>

</body>