[Vuejs]-How to use css to layout a number of dynamically appeared buttons evenly?

by

0👍

To use flexbox to achieve this, as it seems you are trying, you need to set the justify-content property to space-between.

i.e 

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

I would also recommend collecting these styles into a class that can be added into a div.

space-around and space-evenly can also be used for a similar effect, so you might want to try each and see which give you the result you are most happy with.

I highly recommend this guide for figuring out how to get flexbox to do exactly what you want in the future.

Final recommendation: If you want there always to be a gap between the buttons (so that they wrap before they are fully touching) just add a left and right margin to the buttons and flex will take care of the rest.

Leave a comment