我有一些HTML:
.box {
background-color: red;
margin: 10px;
width: 200px;
height: 200px;
}
.container {
background-color: black;
padding: 10px;
width: 100%;
}
.row {
background-color: blue;
display: flex;
flex-wrap: wrap;
}
.row > * {
flex: 0 0 auto;
}
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div>
</div>
我想做的是把“行”放在容器的中间。我希望“行”环绕在盒子周围,宽度不超过盒子侧面的边距(10px*2)。
所以,理论上,它应该看起来像这样:
黑色是容器,蓝色是行,红色是盒子。
有人知道怎么做吗?
要添加一个挑战,如果容器被扩展,这些框将进行调整和移动,保持它们的大小和填充(但行应该位于中心)。类似地,如果容器缩小到小于行,我希望行也缩小,并且仍然包装这些框。
我希望这一切都有道理。
