我正在寻找一个常见用例的Flexbox布局最佳实践解决方案.
在本例中，我想使用Flexbox使分数向右浮动.我想用:
position: absolute;
right: 0;
但问题是我们不能使用中心对齐外盒.
我能想到的另一种方法是制作另一个flex box来包装图像并命名零件，然后创建一个外部flex box来使用
justifyContent: space-between;
以制作预期的布局.
我正在寻找一个常见用例的Flexbox布局最佳实践解决方案.
在本例中，我想使用Flexbox使分数向右浮动.我想用:
position: absolute;
right: 0;
但问题是我们不能使用中心对齐外盒.
我能想到的另一种方法是制作另一个flex box来包装图像并命名零件，然后创建一个外部flex box来使用
justifyContent: space-between;
以制作预期的布局.
使用justify-content: space-between它会将元素推到侧面:
.flex {
display: flex;
justify-content: space-between;
}
.flex-grow {
flex-grow: 1;
}
.one {
border: 1px solid black;
width: 20px; height: 20px;
}
.two {
border: 1px solid black;
width: 20px; height: 20px;
}
.three {
border: 1px solid black;
width: 20px; height: 20px;
}Growing middle element
<div class="flex">
<div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>
Without growing element
<div class="flex">
<div class="one"></div><div class="two"></div><div class="three"></div>
</div>
Without middle element
<div class="flex">
<div class="one"></div><div class="three"></div>
</div>请参阅本精彩教程，轻松了解flex box的行为:https://css-tricks.com/snippets/css/a-guide-to-flexbox/