尝试使用 Flex 框填充空白空间

Question

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>

Answer 1

With CSS-Grid it is possible by using thegrid-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; } .flex-container { display: flex; } to: change .flex-container { display: grid; } .flex-container { display: grid; } to use CSS-Grid
2. remove: .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } .flex-container { height: 240px; flex-wrap: wrap; align-content: flex-start; } to remove unecessary flex-properties
3. change .flex-item { width: 100px; } .flex-item { width: 100px; } to: .flex-item { min-width: 100px; } .flex-item { min-width: 100px; } which allows the elements to be widerr then 100px.
4. change .blue { width: 200px; } .blue { width: 200px; } to: .blue { grid-column: span 2; } .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>

Answer 2

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>