Is it possible to make this yellow square floats naturally to the empty grey square and so on? Each flex-item represents a component they can use 50% or 100% of the container width, but i just have this information when im rendering it.

I was considering use only flexbox, but i dont know if it is possible.

.flex-container {
  display: flex;
  width: 200px;
  height: 240px;
  background: grey;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item {
  width: 100px;
  height: 100px;
}

.red {
  background: red;
 
}

.blue {
  background: blue;
  width: 200px;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item red"></div>
    <div class="flex-item blue"></div>
    <div class="flex-item yellow"></div>
    <div class="flex-item green"></div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

With CSS-Grid it is possible by using the grid-auto-flow property: grid-auto-flow: row dense;

That will place items as dense as possible and automatically re-order them.

1. change .flex-container { display: flex; } to: change .flex-container { display: grid; } to use CSS-Grid
2. remove: .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } to remove unecessary flex-properties
3. change .flex-item { width: 100px; }to: .flex-item { min-width: 100px; } which allows the elements to be widerr then 100px.
4. change .blue { width: 200px; } to: .blue { grid-column: span 2; } to have that element twice the width.

.flex-container {
  display: grid;
  width: 200px;
  background: grey;
  grid-auto-flow: row dense;
}

.flex-item {
  min-width: 100px;
  height: 100px;
}

.red {
  background: red;
 
}

.blue {
  background: blue;
  grid-column: span 2;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item red"></div>
    <div class="flex-item blue"></div>
    <div class="flex-item yellow"></div>
    <div class="flex-item green"></div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I do see there are some comments about this and @Tacoshy is correct that grid is a better solution. But - here is how you can do that using order with flex since the OP specified "using flexbox":

(I also changed the height of the gray div to 300 from 240 for obvious reasons.)

.flex-container {
  display: flex;
  width: 200px;
  height: 300px;
  background: grey;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item {
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  order: 0;
}

.blue {
  background: blue;
  width: 200px;
  order: 2
}

.yellow {
  background: yellow;
  order: 1;
}

.green {
  background: green;
  order: 3
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item red"></div>
    <div class="flex-item blue"></div>
    <div class="flex-item yellow"></div>
    <div class="flex-item green"></div>
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>