如何使用CSS均匀地布置多个动态出现的按钮？

Question

我有许多在vue中使用v-if动态生成的按钮。我想在页面底部均匀地布置按钮（左右空间区域相同）。

我正在使用mdui按钮样式，它看起来是固定的宽度和高度。因此，我必须排成一行（例如，如果少于三个或四个按钮或超过移动页面的宽度）或两排（如果有更多按钮）

我尝试过<div class="bottomBtn" style="display:flex; flex-wrap:wrap;">，但是它不起作用...我对div框感到非常困惑。如何实现呢？

我希望左右空格是均匀的。但是结果显示在图片中，所有按钮都保持对齐...

<div class="bottomBtn">
<button class="mdui-btn mdui-btn-raised">Save</button>
<button class="mdui-btn mdui-btn-raised" v-if="pullDisplay">PullBack</button>
<button class="mdui-btn mdui-btn-raised" v-if="cancelDisplay">Cancel</button>
<button class="mdui-btn mdui-btn-raised" v-if="reviseDisplay">Revise</button>
<button class="mdui-btn mdui-btn-raised" v-if="sendDisplay">SendBack</button>
<button class="mdui-btn mdui-btn-raised" v-if="approvalDisplay">Approval</button>
</div>

Answer 1

要使用flexbox实现这一目标，就像您正在尝试的那样，您需要将justify-content属性设置为space-between。

即

<div class="bottomBtn" style="display:flex; flex-wrap:wrap; justify-content: space-between;">

我还建议将这些样式收集到一个可以添加到div中的类中。

space-around和space-evenly也可以用于产生类似的效果，因此您可能需要分别尝试一下，看看哪一个给您带来您最满意的结果。

我强烈建议this guide来弄清楚如何使flexbox将来完全满足您的需求。

最后的建议：如果您希望按钮之间始终存在间隙（以便在完全触摸之前将它们包裹起来），只需在按钮上增加左右边距即可，flex可以解决其余问题。