我有一个弹性盒设计的页面，它将按钮放置在页面的边缘。
如果我到处都有按钮，则所有按钮都已就位：
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 85%;
width: 85%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height: 48px;
clear:both;
display:flex;
flex-direction:row;
justify-content:space-between;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
display:inline-block;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
所以，上面的代码很好，并且按照我想要的方式工作。方框 2、5、8、11 都在中间。
但是，如果我不需要一些盒子（如 1、4、10），我仍然需要中间的 2、5、8、11。现在他们当然不再处于中间了：
现在我可以添加flex: 1;按钮来对此进行一些控制，但在这种情况下我会失去它们的填充（这很重要，因为它们是按钮）。
Flexbox 有没有办法让 2、5、8 和 11 始终位于中间，而与它们之前和之后的其他元素无关？
泛舟湖上清波郎朗
侃侃无极
相关分类